AltME groups: search
Help · search scripts · search articles · search mailing listresults summary
world | hits |
r4wp | 2 |
r3wp | 91 |
total: | 93 |
results window for this page: [start: 1 end: 93]
world-name: r4wp
Group: Rebol School ... REBOL School [web-public] | ||
Cyphre: 20-Dec-2012 | Henrik, I don't know how hard is to add gradient on line but you can 'emulate' it using textures. See this R2 example: g: draw 100x10 [pen none fill-pen linear 0x0 0 100 0 1 1 red green blue yellow box 0x0 100x10] view layout [origin 0 box 300x300 black effect [draw [pen g spline 0x0 100x100 200x30 300x300 16]]] | |
Steeve: 21-Dec-2012 | I don't rememeber who did the neon effect, but here it is. font-C: make face/font [style: [ bold ] size: 64] neon: "REBOL BAR" coord: 30x15 inc: 0.25.25 draw-block: compose [ line-join round font font-c pen (inc * 1 + 255.0.0.230) line-width 11 text vectorial coord neon pen (inc * 2 + 255.0.0.205) line-width 9 text vectorial coord neon pen (inc * 3 + 255.0.0.180) line-width 8 text vectorial coord neon pen (inc * 4 + 255.0.0.155) line-width 7 text vectorial coord neon pen (inc * 5 + 255.0.0.130) line-width 6 text vectorial coord neon pen (inc * 6 + 255.0.0.105) line-width 5 text vectorial coord neon pen (inc * 7 + 255.0.0.80) line-width 4 text vectorial coord neon pen (inc * 8 + 255.0.0.55) line-width 3 text vectorial coord neon pen (inc * 9 + 255.0.0.30) line-width 2 text vectorial coord neon pen (inc * 10 + 255.0.0.5) line-width 1 text vectorial coord neon ] view/title layout [ box black 450x200 effect [ draw draw-block ] ] "NEON" |
world-name: r3wp
Group: All ... except covered in other channels [web-public] | ||
Izkata: 22-Jan-2008 | I've figured out part of what's going on with the calendar - got it down to a single line of draw dialect that's causing Rebol to segfault, both on the most recent Windows and Linux versions: view layout [box 120x70 effect [draw [pen red white polygon 0x0 119x0 119x69 0x69]]] Something changed between View versions 1.3.1 and 1.3.2 that's causing this... It was working fine with 1.3.1 | |
Group: RAMBO ... The REBOL bug and enhancement database [web-public] | ||
[unknown: 10]: 20-Mar-2006 | effect: [ draw [ pen gray silver line-width 15 line-join round line 22x220 150x350 ] ] | |
Henrik: 5-Jul-2006 | view layout [box 10x50 effect [draw [pen black white line-width 1 line 1x1 1x50 line-pattern 5 5]]] This line crashes Rebol/View 1.3.2 reliably under WinXP | |
Henrik: 5-Jul-2006 | it seems also to be only when specifying two colors after pen. I've boiled it down to this: view make face [size: 1x1 effect: [draw [pen black white box 0x0 0x0 line-width]]] | |
Henrik: 5-Jul-2006 | You can even remove line-width, so: view make face [size: 1x1 effect: [draw [pen black white box 0x0 0x0]]] | |
Group: Core ... Discuss core issues [web-public] | ||
RobertS: 1-Apr-2008 | Diss'ing IDE's might alienate some Smalltalk folk. I cannot imagine maintaining an application suite such as I deal with everyday without an IDE. I just wish it was not eclipse ... Of course only wimps used a Disk Operating System and real men code in machine codes only ... and real pro's dictated their SNOBOL punch cards to lovely assistants ... and ANT scripts are for sissies. Some must have ridiculed Tcl, Expect and TK in their day ... but if my IDE can facilitate my efforts to systematically (key word there) shrirnk company''s codebase as it becomes more reliable with better test coverage then maybe a refactoring browser would be a good tool after all. Even better if it is an integrated part of the IDE, as in Dolphin Smalltalk or Squeak Smalltalk or Smalltalk/X or Cincom Visual Smalltalk. Not that I couldn't survive on grep and diff's. But once the codebase is too large for any one person to author or maintain on their lonesome, a tool that remebers what you did last and where can be a god-send. If you want to know hell without an IDE join an actuarial department working in APL. There you don't even know if they have talent: you just hope most of it works as each quarter rolls around and try to survive year-end. But you know they're smart, cuz after all, they're actuaries - and look at all that APL code in all those files ... of course a few of them look back wistfully at their student days in C with Borland's decent IDE. REBOL [ File: %vid-usage.r Date: 09-Jan-2004 Title: "VID Usage" Purpose: "VID Usage Tutorial with Runnable Examples" Version: 1.2.1 Author: "Cybarite" Edits: RobertS Source: { Based on %easy-vid.r by Carl Sassenrath. Clips from various sites including email that are attributed in the section } library: [ level: 'intermediate platform: 'all type: [tutorial] domain: [gui] tested-under: [view 1.2.8.3.1 on W2K] support: none license: none see-also: none ] ] flash "Fetching image..." read-thru/to http://www.rebol.com/view/demos/palms.jpg%palms.jpg read-thru/to http://www.rebol.com/graphics/reb-logo.gif%rebo-logo.gif read-thru/to http://www.rebol.com/view/bay.jpg%bay.jpg pic: %palms.jpg unview customer: make object! [ ; this sets a default customer object in case the user does not push the samples in order name: "Rosetta Stone" date-of-birth: 14-March-1959 ] stylize/master [text-note: txt maroon bold] ; this sets a default for users who run the samples out of order ; polished is an image that is embedded in this script file ; so that no outside files need to be loaded. ; This technique is used in many of the REBOL samples polished: load #{ 89504E470D0A1A0A0000000D49484452000000670000003808020000006FFB71 8C0000001374455874536F667477617265005245424F4C2F566965778FD91678 0000039B49444154789CCD9BD14E2B310C44F3FFFF521E2AC1C395E00589EF02 5DD8D226713C339EECBD928510A4893D3EF67AB76D7B7E79FEB2D73FAFBDBD1D 36FEEBAF7DBF70FEDABABD0D56F0E1B6E0B6FED7AE81050B2E4F97AF9FED6185 45022048CA2C6920361F1336580B35A63C4E4F12808D378124CE9C81880B186C 14175A1DE9C0C2A2E785B6B64CA62EF6C626330250A932064CB984F3358FA77F BC7F8CD657685E5FB03415A34B9E3226C1484A1ACA6DB6974597699EFB6C2F4E C44B92E17454A309F14F348DDD4D5B98195BB2AF6B7E4E545B57FEBAE0415DA0 43EFE62C70B196362285D74C35F0782ECF26A0FC8492E20EAAED6CC35ACE13FC 61646467C69D5715EA4F9D3725B1703BF45AB2768A9D5F59CA6E716E5A747CBF 23D6A7E418C2C53C6EB440FCE803B106E6D94C8AAF4B42694871B9FB237035C8 70E5A0200D4A7E4553E952A6F435BA247DD4B83A5DB18D26AA4D5E39E0CA4107 7B0F86C7F19EC685B5EFE57D28E02E411CC2238C0304B5065D26DCC1DA9A02FC CE4EBD19A0C58D9BE039179086B6DB20519A1F5C8194071DBB115703B996FF37 4BE0F5AA269B18CFC9C6CC1FC3D5A0D6B62C6AEA112236F38195B88DF12F9C9B B45B1C6C637B161E1D5BCF6D8807A0437366CB21D90462F2BD3E827C96CB0483 D67B99916407E99E69FD12F46A50C973856268A5DC345259837D8827E00FF890 452D0B5D0D38932F3C65B9614B4F720901B96565DCCBD7236B7C66B650868D08 9BFA26EBB36DCAA5E3B120339E5EBE3B468E6B68FB3041E79229047367ADDC14 F7B376F26B2722024A41998813A04CB91A475C11C9054536473CA3F7365C0D30 9E65A0BA6D5977CFEE030BD626B9E2E5DFE76E51AFF9CADA6308F899C76E756A 03D4796E80532E986D273B71CEA8D81672739E0F1B329F8E999D0D9D04080769 CABC1D21260C2BB8E43D2A9D70BE3A2207D66EA09E5BCAFFB742F9F0A0C37677 222CFE9B7C2865192B3FAC5988E0385747334BD8288041E0DFBF4F2AD44804B4 6DADAF2BE98C5D02458059B3571CA91481B09580A9D6E827B184DD3756D6BF7E 7376F81ED59E46633384296A9A4BA7D4E3B8CBD3E566F1948B754731E0EBC41B 246774BD7BBBCA612D8CA7CC85A7C1ED093B75721DCED1D7E279871668830AE7 B782F5E9FDE4918360C9F666A6F61647F2EDB342A2FA3F6E9B0C8AC2699B9B3F 53847BB992B5707FDE5B6D721EA3EB55E3D8190D8BD998923A68917BE3FEDD32 EE1BDCA216275C1CCFBD0A07F35A40A6CC05A1357E6BF512D26DC470BAC927A3 B0078A42DD22E10000000049454E44AE426082 } content: {VID Usage - REBOL Visual Interfaces ===Updates --01-Apr-2008 * Fixed oddity with last item on stylesheets which was locking up some versions of VIEW ---09-Jan-2004 * Fixed slider initialize. * Focus section was not parsed out. --- fixed * Fixed some text errors for the parsing of === ---07-Jan-2004 * Revived vid-usage.r * added more examples from the script library * manage source as vid-usage.leo an outliner file ---12-August-2001 Added supply examples. See: !List/Supply !List With Supplied Data !Supply List With Scroll ---13-August-2001 !Add Subpanel example ported by Anton ===Caveats ---Work In Progress This is a work in progress. Whether the progress will continue depends on the feedback. ---All Rights Reserved The work is based on the documentation of REBOL View provided by REBOL Technology and its mailing list. All rights to this documentation remain the property of REBOL Technology. ---Plagiarized Examples Things are shamelessly plagiarized. There are many experts on the mailing list whose work is included here; most notably the examples from the REBOL documentation. ---Approach The approach that this document uses is to use REBOL/View/VID to demonstrate its abilities and give a visual tutorial. To enable this some changes have been made to the core %easyvid.r program from Carl Sassenrath. A scoll bar was added to the right pane because it was just too difficult to constrain the examples to the screen real estate that was available. ---Order Order The order of the items needs some work. The easyvid presentation approach today does not allow for the drilling down and expansion of an outline tree which is needed for a large amount of documentation. The preferred approach is to put a multi-level tree for navigation purposes and then allow navigation up and down the tree. ===To Do * make this a true outline tree * re-organize it better * update as requested and as possible by suggestions on AltME's REBOL world under group EasyVID * correct numerous flaws * better scrolling implementation using the updates that have been used in other examples such as Didier's %delete-email.r * allow clipping to clipboard like AltME does on a row for the source examples ===Introduction to VID With REBOL/View it's easy and quick to create your own user interfaces. The purpose of this tutorial is to teach you the basic concepts or REBOL/View interfaces in about 20 minutes. VID is REBOL's Visual Interface Dialect. A dialect is an extension of the REBOL language that makes it easier to express or describe information, actions, or interfaces. VID is a dialect that provides a powerful method of describing user interfaces. VID is simple to learn and provides a smooth learning curve from basic user interfaces to sophisticated distributed computing applications. ---Creating VID Interfaces VID interfaces are written in plain text. You can use any text editor to create and edit your VID script. Save your script as a text file, and run it with REBOL/View. !Note: Using a word processor like Word or Wordpad is not recommended because files are not normally saved as text. If you use a word processor, be sure to save the output file as text, not as a document (.doc) file. Recommendation: Look at TextPad from http://www.textpad.com ===Minimal VID Example Here is a minimal VID example. It creates a window that displays a short text message. Only one line of code is required: view layout [text "Hello REBOL World!"] You can type this line at the REBOL console prompt, or save it in a text file and run it with REBOL. If you save it as a file, the script will also need a REBOL header. The header tells REBOL that the file contains a script. Here is an example of the script file with a header: REBOL [Title: "Example VID Script"] view layout [text "VID Example!"] You can also add buttons and other gadgets to the script. The example below displays a text, list of files, and a button: view layout [ h2 "File List:" text-list data read %. button "Great!" ] !Click on the examples above to see how they will appear on your screen. Click on their close box to remove them. All of the examples that follow can be viewed this way. ===Window Management The code that displays the examples also shows how to manage the number of windows that are open. Look at the show-example block in the code near the end of this script. The location of the example window is also managed here by keeping track of the co-ordinates for the sample. After the sample window is moved, the next use will open at the same location. ===Pre-loaded Images For this script, the image which represented a Portable Network Graphic definition of an image is held in the script and loaded. For a small number of graphics, this can achieve some packaging and performance benefits. The image "polished" is used through the script to achieve the polished steel look that is one the outer frame. backtile polished orange button 200x50 "Polished Steel Look" polished ===Two Basic Functions Two functions are used to create graphical user interfaces in REBOL: VIEW and LAYOUT. The LAYOUT function creates a set of graphical objects. These objects are called faces. You describe faces with words and values that are put into a block and passed to the LAYOUT function. The VIEW function displays faces that were previously created by LAYOUT. The example below shows how the result of the LAYOUT function is passed to the VIEW function, and the interface is displayed. view layout [ text "Layout passes its result to View for display." button "Ok" ] Click on the above example to view it. !Note: the block provided to a layout is not normal REBOL code, it is a dialect of REBOL. Using a dialect makes it much easier to express user interfaces. ===Styles Styles describe faces. The examples above use the text and button styles to specify a text line and a button. REBOL has 40 predefined face styles. You can also create your own custom styles. Here are a few example styles: view layout [ h1 "Style Examples" box brick 240x2 vtext bold "There are 40 styles built into REBOL." button "Great" toggle "Press" "Down" rotary "Click" "Several" "Times" choice "Choose" "Multiple" "Items" text-list 120x80 "this is" "a list" "of text" across check radio radio led arrow below field "Text Entry" ] The words like backdrop, banner, box, text, and button are styles. ===Facets Facets let you modify a style. For instance, you can change the color, size, text, font, image, edge, background, special effects, and many other facets of a style. Facets follow the style name. Here is an example that shows how you modify the text style to be bold and navy blue: view layout [txt bold navy "Facets are easy to use."] The words bold and navy are not styles. They are facets that modify a style. Facets can appear in any order so you don't have to remember which goes first. For example, the line above could be written as: view layout [txt "Facets are easy to use." navy bold] Many facets that can be specified. Here is an example that creates bold red text centered in a black box. view layout [txt 300 bold red black center "Red Text"] You can create facets that produce special effects, such as a gradient colored backdrop behind the text: view layout [ vtext bold "Wild Thing" effect [gradient 200.0.0 0.0.200] ] ===Custom Styles Custom styles are shortcuts that save time. When you define a custom style, the facets you need go into the new style. This reduces what you need to specify each time you use the style, and it allows you to modify the look of your interface by changing the style definitions. For example, here is a layout that defines a style for red buttons. The style word defines the new style, followed by the old style name and its facets. view layout [ style red-btn button red text "Testing red button style:" red-btn "Test" red-btn "Red" ] So, if you wanted to create a text style for big, bold, underlined, yellow, typewriter text: view layout [ style yell tt 220 bold underline yellow font-size 16 yell "Hello" yell "This is big old text." yell "Goodbye" ] ===Master Stylesheet REBOL holds its styles in a master stylesheet. When you are sure that you want to share them without having to add the style sheet line then do it as follows: First add the style to the master sheet: button 200x50 "Define text-note as maroon bold text" [stylize/master [ text-note: txt maroon bold ]] button 200x50 "Define text-note as white italic text" [stylize/master [ text-note: txt white italic ]] Then invoke it: view layout [ across size 200x200 return text-note "This shows a master stylesheet style in use." return text-note "This shows another usage of the same style." return text-note "If you want to see the other style displayed, click the Add Style section again and then use the other button" ] ===Note About Examples !From this point forward, all examples will assume that the view and layout functions are provided. Only the layout block contents will be shown. To use these examples in your scripts, you will need to put them in a layout block, as was shown earlier. For example, code that is written as: view layout [button red "Test it"] will now appear as: button red "Test it" ===Face Sizes The size of a face depends on its style. Most styles, such as buttons, toggles, boxes, checks, text-lists, and fields, have a convenient default size. Here are some examples. button "Button" toggle "Toggle" box blue field text-list If no size is given, text will automatically compute its size, and images will use whatever their source size is: text "Short text line" text "This is a much longer line of text than that above." image %palms.jpg You can change the size of any face by providing a size facet. The size can be an integer or a pair. An integer specifies the width of the face. A pair specifies both width and height. Images will be stretched to fit the size. button 200 "Big Button" button 200x100 "Huge Button" image %palms.jpg 50x50 image %palms.jpg 150x50 ===Color Facets Most styles have a default color. For example the body of buttons will default to a teal color. To modify the color of a face, provide a color facet: button blue "Blue Button" h2 red "Red Heading" image %palms.jpg orange Colors can also be specifed as tuples. Each tuple contains three numbers: the red, green, and blue components of the color. Each component can range from 0 to 255. For example: button 200.0.200 "Red + Blue = Magenta" 200 image %palms.jpg 0.200.200 "Green + Blue" Some face styles also allow more than one color. The effect of the color depends on the style. For text styles the first color will be used for the text and the second color for the background of the text: txt "Yellow on red background" yellow red banner "White on Navy Blue" white navy For other styles, the body of the face is the first color, and the second color will be used as its alternate. button "Multicolor" olive red toggle "Multicolor" blue orange ===Layout Commands To drop user interface elements on the canvas according to VIDs directional layout controls ---Across You are placing elements in a row orientation across return button "A" button "B" button "C" return button "D" button "E" button "F" ---Below You are placing elements in a column orientation below return button "A" button "B" button "C" return button "D" button "E" button "F" ---Mix You can mix the directional controls across return button "A" button "B" below button "C" across button "D" button "E" button "F" ---Padding The pad keyword creates extra padding between styles. It uses a pair or integer value. When it is an integer, spacing is created either horizontally (across) or vertically (below). When it is a pair, the spacing will be created both horizontal and vertically. The following example illustrates both uses. First, the buttons "one" and "two" are padded with an integer representing 40 pixels in one direction. Then the buttons "three" and "four" are padded with a pair representing 40x40 pixels. across button "one" pad 40 button "two" return button "three" pad 40x40 button "four" Padding can be negative. backtile polished orange pad 200x200 button "A" pad -100x-100 button "B" ---Guide A guide is a virtual alignment control title "Buttons Without A Guide" button "one" button "two" return button "three" button "four" return button" five" button "six" With an implicit guide location title "Buttons With An Implicit Guide Location" guide button "one" button "two" return button "three" button "four" return button" five" button "six" With an explicit guide location across title "Buttons With An Explicit Guide Location" guide 55x100 button "one" button "two" return button "three" button "four" return button" five" button "six" ===Tabstops Tabs can be used for alignment. ---Across tabs 200 ; sets tabs every 200 pixels across button 20 "A" tab button 20 "B" tab button 20 "C" tabs 100 ; sets tabs every 100 pixels return button 20 "D" tab button 20 "E" tab button 20 "F" ---Below tabs 200 ; sets tabs every 200 pixels below button 20 "A" tab button 20 "B" tab button 20 "C" tabs 100 ; sets tabs every 100 pixels return button 20 "D" tab button 20 "E" tab button 20 "F" ---Explicit Settings Tabstops can be set at explicit values tabs [100 124 166 212 300] across tab button 20 "A" tab button 20 "B" tab button 20 "C" tab button 20 "D" ===Color Facets Most styles have a default color. For example the body of buttons will default to a teal color. To modify the color of a face, provide a color facet: button 200 blue "Blue Button" h2 red "Red Heading" image polished orange Colors can also be specifed as tuples. Each tuple contains three numbers: the red, green, and blue components of the color. Each component can range from 0 to 255. For example: button 200.0.200 "Red + Blue = Magenta" 200 image polished 0.200.200 "Green + Blue" Some face styles also allow more than one color. The effect of the color depends on the style. For text styles the first color will be used for the text and the second color for the background of the text: txt "Yellow on red background" yellow red title "White on Navy Blue" white navy For other styles, the body of the face is the first color, and the second color will be used as its alternate. button 200 "Multicolor" olive red toggle 200 "Multicolor" blue orange From the mailing list, there was a problem reported in changing button color: view layout [ b: button "New color" [ b/color: random 255.255.255 show b ] ] And the answer was that the gradient of the color was preventing this change from working: style color-changing-button button 0.0.0 ; new style overwrites gradient effect b: color-changing-button "New color" [ b/color: random 255.255.255 show b ] ===Text Facets Most faces will accept text to be displayed. Even graphical faces can display text. For example, the box and image faces will display text if it is provided: box blue "Box Face" image polished "Image Face" Most button faces will accept more than one text string. The strings will be shown as alternates as the face is selected. button 200 "Up" "Down" toggle 200 "Off" "On" rotary 200 "Red" "Green" "Blue" "Yellow" choice 200 "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" text-list 200 "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" When other datatypes need to be displayed as text, use the form function to convert them first: button 250 form now field form first read %. ===Normal Text Style Normal text is light on dark and can include a number of facets to set the font, style, color, shadow, spacing, tabbing, and other attributes. text "Normal" text "Bold" bold text "Italic" italic text "Underline" underline text "Bold italic underline" bold italic underline text "Big" font-size 32 text "Serif style text" font-name font-serif text "Spaced text" font [space: 5x0] Text also includes these predefined styles: title "Title" 200 vh1 "vh1" vh2 "vh2" vh3 "vh3" vh4 "vh4" label "Label" ===Document Text Style Document text is dark on light and can also include a number of facets to set the font, style, color, shadow, spacing, tabbing, and other attributes. txt "Normal" txt "Bold" bold txt "Italic" italic txt "Underline" underline txt "Bold italic underline" bold italic underline txt "Big" font-size 32 txt "Serif style text" font-name font-serif txt "Spaced text" font [space: 5x0] Document text also includes these predefined styles: title "Centered title" 200 h1 "Heading 1" h2 "Heading 2" h3 "Heading 3" h4 "Heading 4" tt "Typewriter text" ===Text Entry Fields Text input fields accept text until the enter or tab key is pressed. A text input field can be created with: field To make the field larger or smaller, provide a width: field 30 field 300 Fields will scroll when necessary. Larger amounts of text can be entered in an area. Areas also accept an enter key and will break lines. area You can also specify the area size: area 160x200 To force the text in an area to wrap rather than scroll horizontally, provide the wrap option: area wrap ===Text Setting To set the value of a text field under program control, use /text: e.g. across backtile polished return t1: txt 200 "This is some original text" return f1: field 200 "Some field text" return a1: area {Some original area text.} wrap 200x80 return button 200 "Change Text" [ t1/text: "Some different text" f1/text: "Some new field text" a1/text: {Some wrapping text in the^/ area field to^/ show that this^/ is supported} show [t1 f1 a1] ] ===Text Lists Text lists are easy to create. Here is an example. text-list "Eureka" "Ukiah" "Mendocino" You can also provide it as a block: text-list data ["Eureka" "Ukiah" "Mendocino"] Almost any type of block can be provided. Here is a list of all the files in your current directory: text-list data read %. Here is a list of all the words REBOL has scanned: text-list data first system/words ===Scrolling Text List A style to allow maintenance of lists from Brett Handley on the REBOL list: style updatable-text-list text-list with [ update-slider: does [ sld/redrag lc / max 1 length? head lines ] ] tl: updatable-text-list 300x100 data copy system/locale/months button 300x20 "Delete first entry on the list" [ remove tl/data tl/update-slider show tl ] button 300x20 "Append the 'now' timestamp to list" [ append tl/data mold now tl/update-slider show tl ] ===Text List Picked Values list-of-letters: text-list "a" "b" "c" "d" "e" button 200 "Pick Item 3" [ clear list-of-letters/picked append list-of-letters/picked pick list-of-letters/data 3 show list-of-letters ] ===Images By default an image will be scaled to fit within a face. image 60x60 polished image polished red Images can be framed in a number of ways: image 100x100 polished frame blue 5x5 image 100x100 polished bevel image 100x100 polished ibevel 6x6 Most other faces can accept an image as well as text: box 100x100 polished button "Button" polished purple toggle "Toggle" polished blue red field bold "This is a field." polished effect [emboss tile] field bold "This is another field." polished effect [brighten 100] The image can be provided as a filename, URL, or image data. ===Backdrops A backdrop can be a color, an effect, an image, or a combination of the three. For example a backdrop color would be written as: backdrop navy title "Color Backdrop" gold To create a backdrop effect provide it on the line: backdrop effect [gradient 1x1 0.0.100 100.0.0] title "Gradient Backdrop" gold A backdrop image can be a file, URL, or image data: backdrop polished title "Image Backdrop" red The backdrop image can be colorized: size 400x500 backdrop polished blue title "Blue Image Backdrop" The image can include an effect: backdrop polished effect [fit gradcol 1x1 100.0.0 0.0.250] title "Gradient Image Backdrop" ===Backtile To make a backdrop use a tile effect there are two options: backdrop polished effect [tile] banner "This shows a backdrop with a tile effect" or backtile polished banner "This demonstrates backtile" Note the difference between: size 400x500 backdrop polished banner "Here one image is stretched to cover the canvas" and size 400x500 backtile polished banner "Here one image is repeated to cover the canvas" ===Effect Facets A range of effects are supported for faces. All of these effects are performed directly on the face when it is rendered. Here are examples of a few possible effects in top to bottom then left to right order: style polished-steel image 80x60 polished polished-steel effect [flip 1x1] polished-steel effect [rotate 90] polished-steel effect [reflect 1x1] polished-steel effect [crop 0x50 120x60 fit] polished-steel effect [grayscale] polished-steel effect [invert] polished-steel effect [difference 200.0.0] polished-steel effect [tint 80] return polished-steel effect [contrast 50] polished-steel effect [brighten 50] polished-steel effect [sharpen] polished-steel effect [blur] polished-steel effect [colorize 204.0.0] polished-steel effect [gradcol 1x1 150.0.0 0.0.150] polished-steel effect [gradmul 0x1 0.100.0] polished-steel effect [grayscale emboss] Effects can be used in combination to create other interesting results. However, keep in mind that the computations are performed in real time. If complex combinations are required, a temporary image should be created with the to-image function. ===Actions An action can be associated with almost any face. To do so, follow the face style with a block: button "Test" [alert "test"] The block is used as the body of a function that is passed the face and the current value (if the face has one). For example: toggle "Toggle" [alert form value] rotary "A" "B" "C" [alert form value] text "Click Here" [alert face/text] If a second block is provide, it is used for the alternate actions (right key): button "Click Here" [view/new layout [txt "action"]] [view/new layout [txt "alt-action"]] Use variables to modify the contents or state of other faces. For example, the slider will update the progress bar: slider 200x16 [p1/data: value show p1] p1: progress !More action on actions needed... ===Show After the state is changed for a user interface element, it must be re-drawn to be reflected on the user interface canvas. Accomplish this with the show message. backtile polished across toggle "Toggle State" [ cybernetics?/data: not cybernetics?/data show cybernetics?] return label "Are you interested in cybernetics?" cybernetics?: check One show command can be used for multiple user interface elements backtile polished orange across b1: check label "Red" return b2: check label "Green" return button 200 "Change State But No Refresh" [b1/data: not b1/data b2/data: not b2/data] return button "Show" [show [b1 b2]] ===Hide A user interface element can also be hidden. backtile polished orange across c1: check hide-button: button "Hide" [hide c1] return show-button: button "Show" [show [c1 d2]] The show-button action tries to show a user interface element 'd2' that does not exist. REBOL/View ignores these. ===Invisible Faces To make a button invisible when the view is opened, you can define an invisible button style This approach sets the show? value to false when the user interface element is initialized. across style invisible-button button with [append init [show?: false]] late-shower: invisible-button "I'm Here" return return button 200 "Show Invisible Button" [show late-shower] This works for the other visible user interface element. ===Focus A user interface element can programmatically be given the focus. across backtile polished button 200 "Set focus to Phone Field" [focus f2] return label "Name: " f1: field 100 return label "Phone: " f2: field 100 return button 200 "Remove focus from Phone Field" [unfocus f2] return button 200 "Hide the Phone Field" [hide f2] return ---Focus Defect !Note that the tab function shows a hidden field. I have assumed that this is a defect. If a field is hidden, the tab button should not make it visible. This has been previously sent to feedback. ===Radio Buttons A radio button is used to make a choice between mutually exclusive values. Your preferred programming language is REBOL or C++ or PL/1 or APL but it is only one of those. across backtile polished radio of 'programming-language pad 0x-4 label "REBOL" return radio of 'programming-language pad 0x-4 label "C++" return radio of 'programming-language pad 0x-4 label "PL/1" return radio of 'programming-language pad 0x-4 label "APL" return To mix two groups of radio buttons on one screen, associate them with their groups using the "of 'word". In the above, the grouping is 'programming-language. across backtile polished radio of 'programming-language pad 0x-4 label "Language: REBOL" return radio of 'programming-language pad 0x-4 label "Language: C++" return radio of 'editor pad 0x-4 label "Editor: TextPad" return radio of 'editor pad 0x-4 label "Editor: Notepad" return The padding in the above is needed to keep the label aligned with the radio button. across backtile polished orange radio of 'programming-language pad 0x-4 label "REBOL" return radio of 'programming-language label "APL" return ===Radio Button Settings A radio button is not very useful unless you can find out what its setting is and change that setting under program control. across backtile polished orange rebol-radio: radio of 'programming-language [programming-language: 'rebol] pad 0x-4 label "REBOL" return apl-radio: radio of 'programming-language [programming-language: 'apl] label "APL" return button 200 "Toggle radio button" [ apl-radio/data: not rebol-radio/data: not rebol-radio/data show [rebol-radio apl-radio] ] ===Check Box ---Purpose A check box is used to allow user interface choices where the choices are not mutually exclusive. across backtile polished orange c1: check label "Likes animals" return c2: check label "Like Monkees" return c3: check label "Like The Animals" ---State A check box is not much good if you can't get and set its state (on or off). across backtile polished orange c1: check label "Likes animals" return c2: check label "Like Monkees" return button "Set State" [ c1/data: true show c1 c2/data: false show c2 ] ===Sensor ---Purpose A sensor is an invisible user interface element. Using a sensor only makes sense in a few instances. If you want a keycode action where there is no visible user interface element to link the action to then a sensor can be used. This sensor code adds an Escape or Back or Enter action that will close the window. sensor 1x1 keycode [#"^M" #" " #"^(back)" #"^(ESC)"] [unview] Or if you want to make portions of an image 'hot' instead of putting buttons on top of the image, then a sensor will achieve this. across backtile polished orange txt "Click on the upper left section of the gray image to invoke the sensor action" return animage: image 100x100 polished ; here the image is just the polished area at animage/offset sensor 50x50 [alert "You pushed over the sensor"] ===Displaying Script Values If the script has a standard format headings, including custom ones, these can be used in the application by picking them from the system/script/header. backtile polished across banner "About" return text font-size 16 rejoin ["Title: " form system/script/header/title] return text font-size 16 rejoin ["Originator: " form system/script/header/author] return text font-size 16 rejoin ["Modifier: " form system/script/header/modifier] return text font-size 16 rejoin ["Version: " form system/script/header/version] return text font-size 16 rejoin ["Updated: " form system/script/header/date] return button "OK" [unview] ===Toggle A toggle button represents boolean state - either on or off. The button stays down until toggled again. Colors and text can be paired for "on" and "off" state. toggle "Up" "Down" red blue To set the state via program control, use: across backtile polished return t1: toggle "Up" "Down" red blue return button polished 204.0.0 100 "Toggle State" [ t1/state: not t1/state show t1 ] ===Rotary Buttons Rotary buttons are a different sort of user interface device. They can cause some challenges because the state is what's showing so you have to blindly "toggle" to get to a state that you want. But for quick and easy uses where the user is familiar with the options, they can be handy. If you plan to use them for a long list of items such as shown below, they might give you some usability concerns. ---Example across backtile polished rotary data ["First" "Second" "Third"] ---Setting State across backtile polished return r1: rotary data (my-options: ["First" "Second" "Third"]) return button 200 "Change Rotary State" [ r1/data: next r1/data if tail? r1/data [r1/data: head r1/data] show r1 ] ---Example - Usability For Unfamiliar List Contents The rotary button demonstrated here contains some information unfamiliar to most (Saturn's satellites). Use it to to set the state so that "Calypso" is set. Doable but without knowing the order each re-paint has to be checked to ensure that it is not "Calypso" before clicking again. If you do click past the choice that you want, there is no back function so you have to cycle through again. return rotary data [ "Pan" "Atlas" "Prometheus" "Pandora" "Epimetheus" "Janus" "Mimas" "Enceladus" "Tethys" "Telesto" "Calypso" "Dione" "Helene" "Rhea" "Titan" "Hyperion" "Iapetus" "Phoebe" ] ===Arrows REBOL/View supports arrows as simple user interface elements. Actions can be associated with them. ---Arrowheads And Actions By default, the arrow is 20x20 across size 200x100 backtile polished at 50x50 arrow left [alert "You pressed the left arrow"] [alert "You pushed the alternate button on the left arrow"] at 70x30 arrow up at 90x50 arrow right [alert "You pressed the right arrow"] at 70x70 arrow down ---Very Sharp Arrows And with a little work the arrows and boxes can be merged to look sharper. Here is a "sharp at both ends" arrow from the block diagram script by Carl: origin 0 backcolor white at 0x0 box 40x40 white effect [arrow rotate 270] at 110x0 box 40x40 white effect [arrow rotate 90] at 24x10 box black 100x20 ---Arrow Blend So that shows you how to make an arrow blend into your background size 100x100 across backdrop gray at 50x50 box 40x40 gray effect [arrow rotate 90] at 40x67 box 25x5 black ===LED LEDs would be used to display state (on or off). Clicking the LED toggles its state and changes its color. LEDs do not support alternate mouse button actions. across banner "Light Emitting Diode" return l1: led 10x10 [alert "LED left mouse action"] label "Alert status" l2: led 10x10 [alert "LED left mouse action"] label "Network status" return button "Change state" [ l1/data: not l1/data l2/data: not l2/data show [l1 l2] ] ===Box ---Boxing Draw boxes of any heigth and width with the box style box "Large Box" 200x400 polished orange ---Boxes As Lines If you make the box narrow enough or short enough it is a line (or a dot). across size 300x300 backtile polished at 50x0 box 3x100 gold at 0x50 b1: box 100x3 gold at 10x10 box 5x5 red ---Boxes Can Grow across size 300x300 backtile polished at 150x0 b1: box 100x3 gold return pad 0x100 button "Grow Down" [ for i 3 300 1 [ b1/size/y: 1 + b1/size/y wait 00:00:00.01 show b1 ] ] return pad 0x100 button "Back Up" [ for i 300 3 -1 [ b1/size/y: b1/size/y - 1 wait 00:00:00.01 show b1 ] ] You might even find a use for it. ---Grid Effect Not sure of the use for this yet but here is what you can do: return box "Grid Lock" with [effect: [grid 20x20 8x8 4x3]] white 300x200 return box "Grid Lock" with [effect: [grid 20x20 5x5 3x3]] white - 80 300x200 ===Frame Earlier versions of REBOL VID supported frames in layouts such as view layout [frame "This is the Bay" %bay.jpg] These are no longer valid. But frames can be put around some user interface devices: image 100x100 polished frame red ===List A list is an iterated sub layout and takes a layout block that uses the Visual Interface Dialect. The styles in the layout will be repeated until there is no more room to fit them within the list dimensions. ---Why A face can be iterated to create a number of virtual faces. For instance, when displaying a list of ten buttons, each of the buttons does not need to be created as a separate object. If the buttons only differ by a few facets (such as position, text, and action taken on selection), a model face can be created and iterated for its other position. This is useful when creating scrolling lists of files and other data sets that share the same appearance. ---Supply Supply provides the data to the list for an iterated face. do [cnt: 0 list-collection: [aqua sky water] ] backtile polished orange across list-displayed: list 100x72 [ origin 0 space 0x0 across color-field: txt bold 80x24 ] supply [ if none? one-color: pick list-collection count [exit] face/text: do pick [one-color] index ] return txt gold 180 "OK ... but not too useful" ---Supply Columns Maybe adding some more columns would be better. Here I'll add a column of buttons that display the color name and a column of text strings in italic. do [ cnt: 0 list-collection: [aqua sky water gold silver coffee] ] backtile polished orange across list-displayed: list 300x200 [ origin 0 space 0x0 across color-field: txt bold 80x24 color-button: button 80x24 pad 5x1 txt 100 italic ] supply [ if none? one-color: pick list-collection count [exit] face/text: do pick [ [one-color] [to-string one-color] [rejoin [" " to-string one-color]] ] index ] return txt gold 300 {A bit more interesting but the last row repeats to fill the list size. Some of the other VID components will automatically stretch to fit the size needed (such as this txt field) but the list does not behave that way. You have to make the list size fit its data or make it smaller and add a vertical scroll capability. That is shown a little later on.} ===List With Supplied Data This example is to show adding action to the list and adds a horizontal line between the rows. do [ cnt: 0 list-collection: [aqua sky water gold silver coffee] ] backtile polished orange across list-displayed: list water edge [size: 6x6 color: silver] 350x96 [ origin 0 space 0x0 across color-field: txt 60 [alert rejoin ["You pressed the " face/text " text field"]] pad 45x0 color-button: button 80 [alert rejoin ["You pressed the " face/text " button"]] pad 5x0 txt 120 italic return box 350x1 white ; this causes a horizontal line to appear between each row ] supply [ if none? one-color: pick list-collection count [exit] face/text: do pick [ [one-color] [to-string one-color] [rejoin [" " to-string one-color]] ] index ] ===Supply List With Scroll This example shows a supplied list with a scroll capability. More colors are added to demonstrate scrolling. Note that this is a verbose list of code where I added comments for my understanding of how the scroll was linked to the list. The same effect can be accomplished with fewer lines of code. do [ ; first this do block creates the data definitions needed. slider-position-clicked: 0 count: 0 x: 450 y: 300 row-y: 16 ; the row height includes the data plus any separator lines list-size: to-pair reduce [x y] ; this is the size of the display list separator-size: to-pair reduce [x 1] slider-size: to-pair reduce [24 y ] list-collection: [ aqua bar-color base-color beige black blue brick brown button-color coal coffee crimson cyan forest gold gray green ivory khaki leaf linen magenta main-color maroon mint navy oldrab olive orange over-color papaya pewter pink purple rebolor red sienna silver sky snow tan teal violet water wheat white yellow ] supply-style: stylize [ button-fixed: button left coal to-pair reduce [80 row-y] ; these keep the row elements the same height text-fixed: txt to-pair reduce [160 row-y] ] data-size: length? list-collection ] backtile polished orange ; this section layouts out the list across list-position: at ; the position is captured here in order to later put the slider beside it list-displayed: list linen edge [size: 6x6 color: tan] list-size [ origin 0 space 0x0 across styles supply-style text-fixed [alert rejoin ["You pressed the " face/text " text field"]] button-fixed [alert rejoin ["You pressed the " face/text " button"]] pad 5x0 text-fixed 80 italic [alert rejoin ["You pressed the italic " face/text " text field"]] return box separator-size gray ; this causes a horizontal line to appear between each row ] supply [ count: count + slider-position-clicked if none? one-color: pick list-collection count [exit] face/text: either count > (1 + data-size) [""] [ do pick [ [one-color] ; this is supplied to the first txt field (text-fixed) [to-string one-color] ; this is supplied to the button (button-fixed) [rejoin [" " to-string one-color " "]] ; this value is supplied to the last text-fixed field ] index ] ] ; now add a slider to the side of the list at list-position + (list-size * 1x0) ; this finds the top right border of the list widget vertical-slider: slider slider-size to-integer y / row-y [ slider-position-clicked: vertical-slider/data ; the slider has to be bound to the size of the list * ((1 + data-size) - ((y / (1 + row-y)))) ; including the row height if slider-position-clicked <> count [ count: slider-position-clicked show list-displayed ] ] ===Slider A slider is interactive user interface element. The data of a slider varies from 0 to 1. backtile polished orange across slider-1: slider 200x40 return button 200 "Move first slider to 50%" [ slider-1/data: .5 show slider-1 ] return txt 200 "The second slider in this example is initialized to the 80% mark." return slider 200x40 with [append init [data: .8]] ===Progress Indicator The progress-1 face in this example is a progress indicator. Because it is only displaying information, it is non-interactive i.e. you can not change its value by dragging its edges. The alternate button is not supported on a progress indicator. backtile polished orange across slider 200x40 [ progress-1/data: value field-1/text: join (to-integer (100 * value)) " %" show [progress-1 field-1] ] return progress-1: progress return field-1: field ===Panels Panels are used to create sub-panes that can be more easily managed by grouping the user interface devices on a panel. The first example below shows how to use panels for layout alignment. By creating a panel definition, all of the components defined within it are aligned relative to its origin. across backtile polished brick tabs 50 return panel-1: panel 250x120 [ backtile polished across return button water 200 "Button A" return button aqua 200 "Button B" return button sky 200 "Button C" ] at panel-1/offset + panel-1/size panel 60x90 [ ; start at the bottom right corner of panel-1 backtile polished across return button tan 20 "1" return button coffee 20 "2" ] ---Multiple SubPanels example This example from the REBOL html documentation shows how to easily hide and show sections of a user interface by displaying them on the face area of a box. do [ ; define two panels panel1: layout [ origin 8x8 h2 "Panel 1" field "Field 1" field "Field 2" button "The Answer" [alert "I know nothing."] ] panel2: layout [ origin 8x8 h2 "Panel 2" across txt "X:" slider 150x16 return txt "Y:" slider 150x16 return check [panel2/color: maroon show panel2] txt "Don't click this" return check [panel2/color: silver show panel2] txt "Click this" return ] panel1/offset: 0x0 panel2/offset: 0x0 ] vh2 "Subpanel Examples" ; now demonstrate panel use guide pad 20 button "Panel 1" [panels/pane: panel1 show panels] button "Panel 2" [panels/pane: panel2 show panels] button "Quit" [unview] return box 2x140 maroon return panels: box 220x140 do [panels/pane: panel1] ===Simple Default Style Override The style's default look can be overriden easily with one line of code. For example, to make the default button size 200x200 with a water color, use style button button 200x200 water button "Big Blue Button" [unview] To make the toggle some different default colors: style toggle toggle crimson sky toggle "Up" "Down" Note that these stay in effect until they are overridden so if you use the default values, exercise some care unless you meant to do that. ===Image Maker An option used by Carl in some of his programs is to let View create specific icons so that you have portability and more control of look of the image then if you referenced an external file such as gif that was a bullet display. Here's how to do that: do [ make-image: func [xy wh eff] [ eff: layout [ size 20x20 at xy box wh effect eff ] eff/color: rebolor to-image eff ] dot: make-image 6x5 9x9 [gradient 1x1 255.0.0 0.0.0 oval key 0.0.0] dot-big: make-image 8x7 12x12 [gradient 1x1 255.0.0 0.0.0 oval key 0.0.0] arr: make-image 3x3 14x14 [arrow 0.0.127 rotate 90] ard: make-image 3x3 14x14 [arrow 0.0.127 rotate 180] ] ; end of "do" - it is needed here because easyvid approach is expecting vid dialect commands banner "Presentation Points" size 400x300 across style label label gold ; make a label's text be a different color than the default return image dot label "This is bullet point number 1" return image dot label "This is bullet point number 2" return image arr label "This is arrow point number 1" return image ard label "This is an arrow making a different point" return image dot-big pad 0x4 area 300x80 wrap "And because these arrows and dots are images, action can be added to them to make them 'hot' with mouse actions including 'over'." ===Needs Some Work !More to come. These still need to be covered in this tutorial: text-list data [ icon ] ===Digital Clock origin 0 banner "00:00:00" rate 1 effect [gradient 0x1 0.0.150 0.0.50] feel [engage: func [face act evt] [face/text: now/time show face]] ===REBOL Logo image %rebo-logo.gif [unview] ===Paint Drops REBOL one liner by Vincent Ecuyer b: box rate 9 effect[draw[pen(random snow)circle(random 99x99)2]blur]box 1x1 rate 9 effect[draw[(b/image: to-image b)]] ===eMailer One line emailer by Doc Kimbel Assumes you have set up your email in set-user e: field "Email" s: field "Subject" m: area "Body" btn "Send"[send/subject to-email e/text m/text s/text alert "ok"] ===Hello World text "Hello World!" button "Close" [unview] ===Three Buttons button "Yes" button "Maybe" button "No" ===View Web Text text 800x600 read http://www.rebol.com ===View Image image %palms.jpg ===View Image and File Name Here a do block is used to initialize the file variable within the layout code. do [file: %palms.jpg] image file text form file ===View Image behind File Name Here a do block is used to initialize the file variable within the layout code. do [file: %palms.jpg] image file form file ===Buttons From Images backdrop 40.70.140 stat: text bold "Click a Button" 100x20 240.140.40 center button "Bay Test" %bay.jpg 100x100 [ stat/text: "Upper" show stat ] button "Blue Test" %bay.jpg 100x100 10.30.180 [ stat/text: "Lower" show stat ] ===View List list blue 320x200 [across text white 200 text white 100] data [ ["John" 100] ["Joe" 200] ["Martin" 300] ] ===Movie Credits backdrop %bay.jpg effect [fit] text center bold 240x30 "REBOL, The Movie" yellow font [size: 16] credits: text { Edit This File To Add Your Own Credits It is very simple to do. Only takes a minute. Only REBOL Makes It Possible... } white bold center 240x180 rate 30 para [origin: 0x+100] feel [engage: func [f a e] [ if a = 'time [f/para/origin: f/para/origin - 0x1 show f] ] ] ===Fire Demo box 150x150 with [ edge: none img: image: make image! 150x150 rate: 20 text: "FIREBOLEK" font: make font [size: 24 color: 255.125.0] basic: [draw [image make pair! reduce [(random 3) - 2 -1] img]] effects: reduce [ append copy basic [blur luma -10] append copy basic [sharpen luma -10 blur] append copy basic [contrast 10 blur luma -5] ] effect: first effects feel: make feel [ engage: func [f a e][ switch a [ down [f/effects: next f/effects if tail? f/effects [f/effects: head f/effects] f/effect: first f/effects show f] time [show f repeat i f/size/x - 4 [poke f/image (f/size/x * f/size/y) - i - 2 (random 255.0.0 + random 0.127.0) * 3] f/img: to-image f] ] ] ] ] text 150 {classical fire demo for REBOL^/ press on fire to see other effects.^/ Written by ReBolek, 2001 in 15 mins.^/ We need new category on Assembly:^/ less-than-kb-demo ;-)} with [font: make font [size: 9]] ===Bezier Oldes Bezier Line Demo See script library for %bezier-curve.r Uses functions and data initialized at script startup The end points are draggable to change the curve!!!! Here a do block is used to allow executable lines for initialization purposes. do [ draw-beziere-curve: has [result pp x0 x1 x2 x3 y0 y1 y2 y3 cx bx ax cy by ay t tx ty s] [ result: make block! 120 pp: p0/size/x / 2 x0: p0/offset/x + pp y0: p0/offset/y + pp x1: p1/offset/x + pp y1: p1/offset/y + pp x2: p2/offset/x + pp y2: p2/offset/y + pp x3: p3/offset/x + pp y3: p3/offset/y + pp insert result compose [ pen 155.0.0 line (p0/offset + pp) (p1/offset + pp) line (p2/offset + pp) (p3/offset + pp) pen 255.255.255 line (p0/offset + pp) ] cx: 3 * (x1 - x0) bx: 3 * (x2 - x1) - cx ax: x3 - x0 - cx - bx cy: 3 * (y1 - y0) by: 3 * (y2 - y1) - cy ay: y3 - y0 - cy - by t: s: 0.01 ;this value sets quality of the curve while [t <= 1][ tx: to integer! ( (ax * (t * t * t)) + (bx * (t * t)) + (cx * t) + .5 ) + x0 ty: to integer! ( (ay * (t * t * t)) + (by * (t * t)) + (cy * t) + .5 ) + y0 t: t + s insert tail result to pair! reduce [tx ty] ] return result ] click?: false mouse-pos: 0x0 ] origin 0 bkg: box black 400x400 with [effect: reduce ['draw make block! 120]] style point box 10x10 with [ effect: [draw [pen 0.255.0 fill-pen 0.200.0 circle 4x4 4]] changes: [offset] feel: make feel [ engage: func [f a e][ if a = 'down [click?: on mouse-pos: e/offset] if a = 'up [click?: off] if find [over away] a [ if click? [ f/offset: f/offset + e/offset - mouse-pos bkg/effect/2: draw-beziere-curve show [bkg f] ] ] ] ] ] at 300x200 p0: point at 200x100 p1: point at 200x300 p2: point at 100x200 p3: point do [bkg/effect/2: draw-beziere-curve] ===Buttons Galore Buttons galore from the library script %buttons.r Here a do block is used to execute the initialization needed within the layout block. do [ group: ["rotary" "test" "button"] ] origin 20x10 backdrop effect [gradient 0x1 100.20.0] vh1 "52 Button Click-up - Each with a different click effect..." vtext bold "Here is a small sampling of the thousands of button effects you can create. (This is 78 lines of code.)" at 20x80 guide button "simple" button form now/date button "colored" 100.0.0 button "text colored" font [colors: [255.80.80 80.200.80]] button with [texts: ["up text" "down text"]] button "bi-colored" colors [0.150.100 150.20.20] button with [texts: ["up color" "down color"] colors: [0.150.100 150.20.20]] button "image" pic button "color image" pic 200.100.50 button "flip color" pic with [effects: [[fit colorize 50.50.200][fit colorize 200.50.50]]] button "blink" with [rate: 2 colors: [160.40.40 40.160.40]] return button "multiply" pic with [effects: [[fit][fit multiply 128.80.60]]] button "brighten" pic with [effects: [[fit][fit luma 80]]] button "contrast" pic with [effects: [[fit][fit contrast 80]]] button "horiz flip" pic with [effects: [[fit][fit flip 1x0]]] button "vert reflect" pic with [effects: [[fit][fit reflect 0x1]]] button "invert" pic with [effects: [[fit][fit invert]]] button "vert grad" with [effects: [[gradient 0x1 0.0.0 0.200.0] [gradient 0x1 0.200.0 0.0.0]]] button "horiz grad" with [effects: [[gradient 1x0 200.0.0 200.200.200][gradient 1x0 200.200.200 200.0.0]]] button "both grad" with [effects: [[gradient 1x0 140.0.0 40.40.200] [gradient 0x1 40.40.200 140.0.0]]] button "blink grad" with [rate: 4 effects: [[gradient 1x0 0.0.0 0.0.200] [gradient 1x0 0.0.200 0.0.0]]] button "blink flip" pic with [rate: 8 effects: [[fit][fit flip 0x1]]] return button "big dull button with several lines" 100x80 0.0.100 button "dual color" pic 50.50.100 100.50.50 100x80 with [edge: [color: 80.80.80]] button "big edge" pic 100x80 with [edge: [size: 5x5 color: 80.80.80] effects: [[fit colorize 50.100.50][fit]]] button "oval reflect" pic 50.100.50 100x80 with [effect: [fit reflect 1x0 oval]] return button "text on top" pic 100x80 with [font: [valign: 'top] effects: [[fit gradcol 1x1 200.0.0 0.0.200] [fit gradcol -1x-1 200.0.0 0.0.200]]] button "text on bottom" pic 100x80 50.50.100 with [font: [valign: 'bottom] effects: [[fit][fit invert]]] button "big text font" pic 100x80 with [font: [size: 24] effects: [[fit multiply 50.100.200][fit]]] button "cross flip" pic 50.100.50 100x80 with [effect: [fit flip 0x1 reflect 0x1 cross]] return toggle "toggle" toggle "toggle red" 100.0.0 toggle "toggle up" "toggle down" toggle "toggle colored" 0.150.100 150.20.20 toggle "up color" "down color" 0.150.100 150.20.20 toggle "toggle multiply" pic with [effects: [[fit][fit multiply 128.80.60]]] toggle "toggle contrast" pic with [effects: [[fit][fit contrast 80]]] toggle "toggle cross" pic with [effects: [[fit][fit cross]]] toggle "toggle v-grad" with [effects: [[gradient 0x1 0.0.0 0.200.0] [gradient 0x1 0.200.0 0.0.0]]] toggle "toggle h-grad" with [effects: [[gradient 1x0 200.0.0 200.200.200][gradient 1x0 200.200.200 200.0.0]]] toggle "toggle both" with [effects: [[gradient 1x0 140.0.0 40.40.200] [gradient 0x1 40.40.200 140.0.0]]] return rotary data group rotary data reduce [now/date now/time] rotary data group 100.0.0 0.100.0 0.0.100 rotary data group with [font: [colors: [255.80.80 80.200.80]]] rotary data group with [colors: [0.150.100 150.20.20]] rotary data group pic rotary data group pic 200.100.50 rotary data group pic with [effects: [[fit colorize 50.50.200][fit colorize 200.50.50]]] rotary data group with [effects: [[gradient 0x1 0.0.0 0.200.0] [gradient 0x1 0.200.0 0.0.0]]] rotary data group with [effects: [[gradient 1x0 200.0.0 200.200.200][gradient 1x0 200.200.200 200.0.0]]] rotary data group with [effects: [[gradient 1x0 140.0.0 40.40.200] [gradient 0x1 40.40.200 140.0.0]]] ===Paint Program This section is a clip of the layout portion of Frank Sievertsen's remarkable paint program. Open this example to enable a quick link to the real source: button "Browse Source" [browse http://www.reboltech.com/library/html/paint.html] button "Close" [unview] In the example below, a DO block is used to execute initialize code. do [ color: fill-color: start: draw-image: draw-pos: tmp: none type: 'box undos: [] redos: [] draw: func [offset /local tmp] [ compose [ pen (color/color) fill-pen (fill-color/color) (type) (start) (either type = 'circle [ tmp: offset - start to-integer square-root add tmp/x ** 2 tmp/y ** 2 ] [offset]) ] ] ] backdrop effect compose [gradient 1x1 (sky) (water)] across draw-image: image white 300x300 effect [draw []] feel [engage: func [face action event] [ if all [type start] [ if find [over away] action [ append clear draw-pos draw event/offset show face ] if action = 'up [ append/only undos draw-pos draw-pos: tail draw-pos start: none ] ] if all [type action = 'down] [ start: event/offset ] ]] do [draw-pos: draw-image/effect/draw] guide style text text [ tmp: first back find face/parent-face/pane face tmp/feel/engage tmp 'down none tmp/feel/engage tmp 'up none ] label "Tool:" return radio [type: 'line] text "Line" return radio [type: 'box] on text "Box" return radio [type: 'circle] text "Circle" return style color-box box 15x15 [ face/color: either face/color [request-color/color face/color] [request-color] ] ibevel color: color-box 0.0.0 text "Pen" return fill-color: color-box text "Fill-pen" return button "Undo" [if not empty? undos [ append/only redos copy last undos draw-pos: clear last undos remove back tail undos show draw-image ]] return button "Redo" [if not empty? redos [ append/only undos draw-pos draw-pos: insert draw-pos last redos remove back tail redos show draw-image ]] ===Font Lab Carl's Font lab Here a do block is used to initialize some values needed in the layout do [ change-styles: func [style start facet subfacet value /local v][ start: find style/pane start foreach f start [ f: in f facet if subfacet <> 'none [f: in get f subfacet] either block? value [ if not block? get f [set f either none? get f [copy []][reduce [get f]]] either v: find get f value [remove v][head insert get f value] ][set f value] ] show style ] chg: func ['facet 'subfacet value] [ change-styles external-view norm-start facet subfacet value ] shad: does [chg font shadow sdir * to-integer sl2/data * 16] sdir: 1x1 sz: 180x40 sx2: sz/x / 2 ] style tgl toggle 60 style lab vtext bold backcolor rebolor space 0x5 across p: choice 180 "Sans-Serif Style" "Serif Style" "Fixed Width Style" [chg font name pick reduce [font-sans-serif font-serif font-fixed] index? p/data] return tgl "Bold" [chg font style [bold]] tgl "Italic" italic [chg font style [italic]] tgl "Lined" underline [chg font style [underline]] return tgl "Left" of 'tg1 [chg font align 'left] tgl "Center" of 'tg1 [chg font align 'center] tgl "Right" of 'tg1 [chg font align 'right] return tgl "Top" of 'tg2 [chg font valign 'top] tgl "Middle" of 'tg2 [chg font valign 'middle] tgl "Bottom" of 'tg2 [chg font valign 'bottom] return lab "Size:" 60x20 font [] sl: slider 120x20 [chg font size max 8 to-integer sl/data * 40] with [append init [data: .5]] return lab "Space:" 60x20 font [] sl1: slider 120x20 [chg font space (1x0 * to-integer sl1/data * 20) - 5x0] return lab "Shadow:" 60x20 font [] sl2: slider 120x20 [shad] with [append init [data: .5]] return lab "Shad Dir:" 60x20 arrow left [sdir: sdir * 0x1 + -1x0 shad] pad 6 arrow right [sdir: sdir * 0x1 + 1x0 shad] pad 6 arrow up [sdir: sdir * 1x0 + 0x-1 shad] pad 6 arrow down [sdir: sdir * 1x0 + 0x1 shad] pad 6 return button sx2 "Text Color" [chg font color request-color] button sx2 "Area Color" [chg color none request-color] return button sx2 "Help" [alert "Click the controls on the left to change text on the right."] button sx2 "Close" #"^Q" [unview] below at p/offset + (p/size * 1x0) + 10x0 norm-start: Title "Title" sz h1 "Heading 1" sz h2 "Heading 2" sz h3 "Heading 3" sz h4 "Heading 4" sz h5 "Heading 5" sz at norm-start/offset + (norm-start/size * 1x0) + 10x0 banner "Banner" sz vh1 "Video Heading 1" sz vh2 "Video Heading 2" sz vh3 "Video Heading 3" sz vtext "Video Text" sz text "Document Text" sz ===Windows Clipboard ---Cut or Copy to Clipboard Normal Windows cut and copy commands are supported e.g. on a field, contents can be copied to the clipboard. Programmatic access is also supported for text contents. across label "Entry field: " return input-field: field 200 "Enter your text here" return button 200 "Copy Entry field data to clipboard" [write clipboard:// input-field/text] return button 200 "Show Clipboard Contents" [alert read clipboard://] ---Clearing The Clipboard across button 200 "Clear The Clipboard" [write clipboard:// ""] return button 200 "Show Clipboard Contents" [alert read clipboard://] ---Paste from Clipboard Normal Windows paste commands are supported e.g. on a field, contents can be pasted. Programmatic access is also supported for text contents. across button 200 "Show Clipboard Contents" [alert read clipboard://] ===Requesters REBOL View supports an assortment of requesters. The results of the request-* code are returned as its value e.g. chosen-date: request-date ---Request Yes | No | Cancel Provides the user the capability to pick from choices "Yes" | "No" | "Cancel" The result is "True" | "False" | none do [user-response: none] button "Simple Request" 200 [user-response: request "Do you want to abandon your input so far?"] button "View User Response" 200 [alert form user-response] ---Pick A Color do [chosen-color: gold] button "Pick Color" 200 [chosen-color: request-color] button "View Chosen Color" 200 [alert form chosen-color] ---Pick An Answer The request allows a descriptive value then 1, 2, or 3 options. button "Format" 100 [request ["Your message goes here. It will wrap if it is very very long." "Choice 1" "Choice 2" "Choice 3"]] button "Example 1" 100 [request ["Pick The Color of Your New Model T" "Black"]] button "Example 2" 100 [request ["Pick one country" "England" "France"]] button "Example 3" 100 [request ["Run Extract Script?" "Yes" "No" "Cancel"]] ---Pick A Date do [chosen-date: 01-Jun-1990] button "Pick Date" 200 [chosen-date: request-date] button "See Chosen Date" 200 [alert form chosen-date] ---Get A LogonID and Password do [credentials: none] button "Get Credentials" 200 [credentials: request-pass] button "View Credentials" 200 [ view/new layout [ size 200x200 backtile polished orange across banner "Credentials" return label "LogonID: " txt pick credentials 1 return label "Password: " txt pick credentials 2 ] ] ---Pick A File Format: REQUEST-FILE /title title-line button-text /file name /filter filt /keep do [filter-block: ["*.gif" "*.jpg" "*.png" "*.bmp"]] button "Pick Any File" 300 [request-file "Select"] button "Pick With A Title" 300 [request-file/title "Pick The Data File to Process" "OK"] button "Change the Action Button Name" 300 [request-file/title "Pick The Data File to Process" "OK"] button "Keep Results" 300 [request-file/title/keep "Previous Select On This Button Is Kept" "OK"] button "Filter Files" 300 [request-file/title/filter "Pick An Image File" "OK" filter-block] ---Request Text Input Format: REQUEST-TEXT /offset xy /title title-text /default str button "Request Text Input - all default parameters" 300 [request-text] button "Request Text Input - with offset to window" 300 [request-text/offset 40x40] button "Request Text Input - with title" 300 [request-text/title "Input your question"] button "Request Text Input - with default" 300 [request-text/default "Key your question here"] button "Request Text Input - with all parameters" 300 [request-text/offset/title/default 100x100 "Input your question" "Key your question here"] ---Request Download from Net Request a file download from the net. Show progress. Return none on error. Format: REQUEST-DOWNLOAD url /to local-file backtile polished orange button "Request File Download To local REBOL Cache" 300 [request-download http://www.rebol.com/index.html] button "Request File Download To This Directory" 300 [request-download/to http://www.rebol.com/index.htmlnone] button "Request File Download To Specific File" 300 [request-download/to http://www.rebol.com/index.html%/c/temp.html] ===Message Box button "Format" 100 [request ["Your message goes here. It will wrap if it is very very long and tedious." "Close"]] button "Example" 100 [request ["You done good!" "OK"]] ---Confirmation button "Exit" 100 [ request/confirm "Do you want to quit without saving?" [] ] ===Calling the Editor The REBOL editor is now callable with the editor function backtile polished button 300 "Create a test file and edit it" [ write %temp.txt "This is a test file" editor %temp.txt ] frame 204.0.0 ===Calling Windows With View/Pro the calling of executables is supported. Here are two simple examples that will work if you have View/Pro on a platform where a notepad and calc are avaiable. across backtile size 200x200 return button "Notepad" [call ["notepad.exe"]] return button "Calculator" [call ["calc.exe"]] ===Window Options Note that these are options which are ignored by the easyvid.r code that displays them in this tutorial. Copy the code out and run it standalone in REBOL/View. ---Block Options: No Border and No Title view/options layout [ size 200x200 banner "Window Options" button "Close" [unview] ] [ no-border no-title ] ---Word Option: No Title Note that the results of this are surprising if you run it from within a script that has a title option. It is displayed near location 0x0 of the resulting window instead of in the window frame that has been suppressed. view/options layout [ size 200x200 banner "Window Options" button "Close" [unview] ] 'no-title ===REBOL/View Notifiers REBOL/View supports simple notifiers to send messages to a user interface ---Alert button 220 polished "Send alert message" [ alert "This causes a dialogue box to popup" ] ---Flash Flash is provided to provide a message and keep on processing. across size 200x200 return button 150 "Create Flash Message" [flash "Testing"] return button 150 "Unview Flash" [unview] ---Inform inform layout [ backtile polished sky across text font-size 16 bold underline red "Action complete!" return button "OK" [unview]] ---Popup REBOL supports popups (see note below before running!) across size 200x200 button "Show Popup" [ show-popup popup-layout: layout [ across size 200x200 backtile polished banner "The Popup Worked" return button "Unview" [unview] ] ] return button "Hide Popup" [unview/only popup-layout] I have had some difficulties (process lockup) when using these popups so just use view layout [...] and skip the popup part. ===Diagram Example Carl has created some diagrams in REBOL using styles to make an architecture diagram. This is a slightly modified version. Here again a DO block precedes the layout code for non-layout initiatiation ... here the definition of a function. Why make a diagram this way? 1. One reason is that it can be interactive ... the sections are all "hot" with a few lines of code. Here they pop up REBOL Dialogs but they could do anything that can be coded even something as simple as launching a browser on a different URL for each diagram component. The "Compositor" box demonstrates this by launching your browser on the REBOL.com site. 2. Very small footprint size compared to other presentation source formats. do [ information: func [info [string!]][ request/ok reform [ info] ] ] style bx box 255.255.255 0.0.0 font-size 11 font [color: 0.0.0 shadow: 0x0] edge [size: 5x2] [request/ok reform ["No information on" face/text]] style bb box bold left top para [origin: 6x10] edge [size: 2x2] [request/ok reform ["No information on" face/text]] backcolor silver + 30 at 15x15 h1 486 left "Arch Structure" at 15x50 bb "Client" 506x436 160.80.80 [ information "Any client machine e.g. branch or Call Centre"] at 25x252 bb "Mid-Tier" 486x68 effect [gradient 1x1 169.91.155 80.45.75] at 25x152 bb "UI" 486x96 effect [gradient 1x1 38.156.82 19.78.41] at 25x324 bb "Servers" 486x151 effect [gradient 1x1 103.96.200 50.45.100] [ information "Mid-tiers servers with XYZ relational database server" ] at 130x216 bx "Compositor" 182x24 bold [browse http://www.rebol.com] at 130x60 bx "Browser" 120x24 [information "Branch standard browser"] at 130x188 bx "Sound" 182x24 bold [information "Sound services"] at 255x60 bx "Win32" 120x24 [information "Win32 App"] ===Column Images Creates a layout looking (a little) like columns. It uses a gradient effect going from darker to lighter do [ column: make image! layout [ backdrop effect [gradient 1x0 20.20.20 250.240.230 luma 60] ] column-size: 50x420 area-size: 400x420 ; height should be the same as column-size ] backtile polished tan across image column-size column pad -10x0 ; this brings the default VID spacing back area wrap area-size edge none ; take the edge off of area so that it more closely blends shadow 2x2 pad -10x0 image column-size column ; if you want a right column ===Tree View of Directory This is Didier's tree view %request-dir.r In this sample, you must be online because the code is accessed on the Rebol script server do [do http://www.rebol.org/library/scripts/request-dir.r request-dir ] Note that: * the script is read from the script library but runs locally * it is showing the files in your directories ===The emailer Function The function for emailing has appeared in Jan-2004 on the rebol list. It is a simple idea ... to create a standard emailer by invoking a function emailer. This window will show the source: text wrap 400x300 mold get 'emailer And it is simple to run: across size 200x200 return button 150 "Run emailer" [emailer] But on my machine there is again a problem - the emailer locks up REBOL/View. Recommendation: * if it works use it if you like * use Doc Kimbel's one liner (works for me). Assumes you have set up your email in set-user e: field "Email" s: field "Subject" m: area "Body" btn "Send"[send/subject to-email e/text m/text s/text alert "ok"] * better yet, make your own... if the code for the basic is 1 line, then a custom version is not far away. Here's an example that allows selection of your frequent contacts (entered in the names-addresses series) and keeps a journal of email that you have sent (using this code) in file email-journal.txt. Assumes you have setup your user profile correctly to allow sending of email. do [ names-addresses: [ "Contact 1" [contact1-:-no-such-address-:-com] "Contact 2" [contact2-:-no-such-address-:-com] "Contact 3" [contact3-:-no-such-address-:-com] ] names: copy [] foreach [name address] names-addresses [append names name] journal?: false ; set to true if want to journalize sent email ] e: rotary 200 data sort names s: field "Subject" m: area 500x400 wrap "Body" btn "Send"[ send/subject who-to: select names-addresses e/text m/text s/text alert join "Sent email to: " form who-to if journal? [ write/append %email-journal.txt rejoin [ "[ When-sent: " now/precise " To: " who-to " Subject: {" s/text "} Message: {" m/text "} ] " newline ] ] ] btn "Quit" [unview] It won't take much to change this from the rotary used to a text list allowing multiple selections. ===Some More email Earlier there have been a few examples of sending email. Here are a few more that often appear in the mailing list ---Simple Send This is not a runnable version because you don't need anything but REBOL/Core to run it. It has been wrapped in a DO block so it does not send errors to the console. ---Quick Send Short Message do [ send [address-:-isp-:-com] "My Message" ] ---Send Longer Message Now a more complex message where there is a body to the message: do [ send [address-:-isp-:-com] {Sample Message This is the body of the message } ] ---Send with One Attachment Here, so that the sample does not fail, test file(s) are created by the code before attempting the send. do [ test-file: %file-attachment.txt write test-file {Just some test data to create a file} send/attach [address-:-isp-:-com] {Sample Message This is the body of the message } test-file ] ---Send with Attachments And a message with multiple attachments. Here, so that the sample does not fail, test file(s) are created by the code before attempting the send. do [ files: [%file-attachment.txt %second-attachment.txt] foreach file files [write file {Just some test data to create a file}] send/attach [address-:-isp-:-com] {Sample Message This is the body of the message } files ] ---Send to Multiple Addresses Here, so that the sample does not fail, test file(s) are created by the code before attempting the send. do [ files: [%file-attachment.txt %second-attachment.txt] foreach file files [write file {Just some test data to create a file}] send/attach [[address-:-isp-:-com][asecondAddress-:-isp-:-com]] {Sample Message This is the body of the message } files ] ---Send/only Same send only just provide the SMTP server with one copy: Here, so that the sample does not fail, test file(s) are created by the code before attempting the send. do [ files: [%file-attachment.txt %second-attachment.txt] foreach file files [write file {Just some test data to create a file}] send/only/attach [[address-:-isp-:-com][asecondAddress-:-isp-:-com]] {Sample Message This is the body of the message } files ] ---Send With Header This example uses a Do block to wrap the code. If you execute the email should be sent. But it is unlikely to be delivered. The addresses for me and you should be changed in your use as well as the * Subject * Organization * Content do [ me: [myaddress-:-isp-:-com] you: [youraddress-:-isp-:-com] header-object: make system/standard/email [ From: me Reply-To: me Subject: "Some Stuff" Organization: "Cyberia" MIME-Version: 1.0 Content-Type: "text/plain" ] send/header you {Test Message This is the message body. } header-object ] ---Send with CC This adds a copy value in the header-object do [ me: [myaddress-:-isp-:-com] you: [youraddress-:-isp-:-com] header-object: make system/standard/email [ From: me Reply-To: me Subject: "Some Stuff" Organization: "Cyberia" MIME-Version: 1.0 Content-Type: "text/plain" cc: [another-address-:-isp-:-com] ] send/header you {Test Message This is the message body. } header-object ] ---Doctored Code Again Doc Kimbel's one liner that does not waste a character e: field "Email" s: field "Subject" m: area "Body" btn "Send"[send/subject to-email e/text m/text s/text alert "ok"] ===Sharp Styles I really like the style that Didier has put around his email previewer do [ ss-light: stylize [ text: text feel none vtext: vtext feel none col-hdg: text black 255.255.204 bold middle effect [] col-txt: text edge [size: 1x0 color: gray effect: 'bevel] ban: vh3 left to-pair reduce [ 50 logo.gif/size/y] edge [ color: 0.0.0 size: 0x1] feel none with [color: black] lab: label para [origin: 2x3 margin: 0x2] labe: lab edge [size: 1x1 color: water effect: 'ibevel] inf: info 100 font-color yellow bkg: backdrop water - 10.10.10 txt-big: vtext 300 font-size 18 font-color yellow center rti: vtext font-size 14 bold txt-ch: rti font-color white 170x22 para [ origin: 2x3] with [font: make font [ color: white] colors: [55.95.155 235.170.55]] btnb: btn 70.70.70 font-color white men: rti 264 edge [size: 1x1 color: water effect: 'bevel] para [origin: 20x2 margin: 1x4] with [color: water - 40.40.40 effect: first effects: [ [draw [pen white fill-pen white polygon 5x2 13x10 5x18]] [draw [pen white fill-pen white polygon 2x5 10x13 18x5]] ] feel: none] ;system/view/vid/vid-feel/hot] cbox: box 60x20 edge [size: 1x1 color: water effect: 'bevel] [ if temp: request-color/color first face/data [face/color: temp change face/data temp show face] ] with [append init [color: first data]] ] stylesheet: ss-heavy: stylize/styles [ col-hdg: col-hdg effect [gradcol 0x1 200.200.160 155.155.104] ban: ban effect [merge gradcol 150.180.200 0.0.0] with [color: none] bkg: backdrop effect [gradient 1x1 65.125.175 45.75.115 grid 2000x4 1999x4 70.130.190 blur] txt-big: vtext 300 font-size 18 font-color yellow center rti: vtext font-size 14 bold txt-ch: txt-ch effect [gradcol -1x1 105.105.105 151.151.151] men: men effect [gradcol -1x0 black water] ] ss-light ] styles stylesheet space 4x4 origin 4x4 across bkg pad 15 ban 235 :title para [origin: 32x0] pad -254 image 30x30 %palms.jpg effect [fit key 255.0.255] } code: text: layo: external-view: none sections: [] layouts: [] space: charset " ^-" chars: complement charset " ^-^/" rules: [title some parts] title: [text-line (title-line: text)] parts: [ newline | "===" section | "---" subsect | "!" note | example | paragraph ] text-line: [copy text to newline newline] indented: [some space thru newline] paragraph: [copy para some [chars thru newline] (emit txt para)] note: [copy para some [chars thru newline] (emit-note para)] example: [ copy code some [indented | some newline indented] (emit-code code) ] section: [ text-line ( append sections text append/only layouts layo: copy page-template emit h1 text ) newline ] subsect: [text-line (emit h2 text)] emit: func ['style data] [repend layo [style data]] emit-code: func [code] [ remove back tail code repend layo ['code 460x-1 trim/auto code 'show-example] ] emit-note: func [code] [ remove back tail code repend layo ['tnt 460x-1 code] ] show-example: [ if external-view [xy: external-view/offset unview/only external-view] xcode: load/all face/text if not block? xcode [xcode: reduce [xcode]] ;!!! fix load/all if here: select xcode 'layout [xcode: here] external-view: view/new/offset layout xcode xy ] page-template: [ size 500x480 origin 8x8 backdrop white - 80 style code tt snow navy bold as-is para [origin: margin: 12x8] style tnt txt maroon bold ] parse/all detab content rules show-page: func [i /local blk last-face][ i: max 1 min length? sections i append clear tl/picked pick sections i if blk: pick layouts this-page: i [ f-box/pane: layout/offset blk 0x0 last-face: last f-box/pane/pane ; bh slider f-box/pane/pane/1/size: f-box/pane/size: max 500x480 add 20x20 add last-face/offset last-face/size ; bh slider update-slider ; bh slider show f-box ] show tl ; changed to after slider update ; was not refreshing the index display ] update-slider: does [ sld/data: 0 either object? f-box/pane [ sld/redrag min 1.0 divide sld/size/2 f-box/pane/size/2 sld/action: func[face event] compose [ f-box/pane/offset/2: multiply face/data (subtract 480 f-box/pane/size/2) show f-box ] ][ sld/redrag 1.0 show sld sld/action: none ] show sld ] main: layout [ backtile polished across vh2 title-line return tl: text-list 160x480 bold black white data sections [ show-page index? find sections value ] h: at f-box: box 500x480 at h + 500x0 sld: slider 24x480 ; add brett's slider at h + 456x-24 across space 4 arrow left keycode [up left] [show-page this-page - 1] arrow right keycode [down right] [show-page this-page + 1] pad -150 txt white italic font-size 16 form system/script/header/date/date ] show-page 1 xy: main/offset + either system/view/screen-face/size/x > 900 [ main/size * 1x0 + 8x0][300x300] view main | |
Group: View ... discuss view related issues [web-public] | ||
Gabriele: 7-Jan-2005 | view layout [box 400x400 white effect [draw [translate 2x2 pen gray line-width 1.7 line 10x300 100x200 390x10] blur blur blur blur blur blur draw [pen red line-width 1.2 line 10x300 100x200 390x10]]] | |
Ashley: 7-Mar-2005 | Tried on both 1.2.10 and 1.2.48. Note that the lack of a red line on 1.2.10 is due to a known bug with polygon (fixed in 1.2.48). On 1.2.48 I can't see a difference between: a) view layout [box 100x100 effect [draw [pen 255.0.0 fill-pen 0.0.255 polygon 0x0 0x90 90x90 fill 50x50]]] b) view layout [box 100x100 effect [draw [pen 255.0.0 fill-pen 0.0.255 polygon 0x0 0x90 90x90]]] So I'm still not sure what 'fill is supposed to do. ;) | |
Gabriele: 30-Aug-2005 | view layout [box 400x400 white effect [draw [pen black line-width 10 line-cap round line 30x30 300x30 line 50x100 70x100 translate 0.5 0.5 pen none fill-pen black circle 30x100 5]]] | |
Geomol: 30-Aug-2005 | view layout [i: image black effect [draw [pen white line-width 10 line-cap round line 20x 20 80x20 line 40x40 70x40 line-width 3 line 30x60 80x60 line-width 1 line 25x80 80x80 transl ate 0.5 0.5 pen none fill-pen white circle 20x40 5 circle 20x60 1.5 circle 20x80 0.5]] image (i/size * 5) (to-image i)] | |
Geomol: 30-Aug-2005 | view layout [i: image black effect [draw [pen white line-width 10 line-cap round line 20x20 80x20 line 40x40 70x40 line-width 3 line 30x60 80x60 line-width 1 line 25x80 80x80 translate 0.5 0.5 pen none fill-pen white circle 20x40 5 circle 20x60 1.5 circle 20x80 0.5]] image (i/size * 5) (to-image i)] | |
Geomol: 31-Aug-2005 | view layout [i: image black effect [draw [line-width 4 line-cap round pen white line 30x20 80x20 pen none fill-pen white circle 20x20 2 pen white line 30x40 80x40 translate 0.5 0.5 pen none fill-pen white circle 20x40 2]] image (i/size * 5) (to-image i)] | |
Geomol: 31-Aug-2005 | view layout [i: image black effect [draw [line-width 2 line-cap round pen white line 30x20 80x20 pen none fill-pen white circle 20x20 1 pen white line 30x40 80x40 translate 0.5 0.5 pen none fill-pen white circle 20x40 1]] image (i/size * 5) (to-image i)] | |
Geomol: 23-Sep-2005 | view layout [box white effect [draw [pen black line 0x100 10x80 20x85 30x50 40x60 50x65 60x55 70x40 80x50 90x20]]] | |
Anton: 14-Nov-2005 | I see. I noticed also that the DRAW function adds PEN pen-col FILL-PEN fill-col LINE start offset for every new point, when what is necessary is only new offsets. | |
Anton: 14-Nov-2005 | I suggest to add an OLD-TYPE variable, and put something like this in the DRAW function: either all [type = 'free-hand type <> old-type][ ; add all the initialising stuff (PEN FILL-PEN, LINE start) ][ ; otherwise compose in nothing ] | |
Graham: 15-Nov-2005 | >> t == {xNËĎ+QHĘĎI16R(HÍS¨LÍÉÉ/W(JMQČÉĚKŐ-H,)I-ĘS0^EB°@yfJIQ,^@\Z^T^T:^@^@^@} >> insert db-port [{update results set draw = (?) where rid = 174} t ] >> insert db-port {select draw from results where rid = 174} >> r: pick db-port 1 == [{xNËĎ+QHĘĎI16R(HÍS¨LÍÉÉ/W(JMQČÉĚKŐ-H,)I-ĘS0^EB°@yfJIQ,^@\Z^T^T:^@^@^@}] >> decompress to-binary r/1 == {[font bold32 pen yellow red line-pattern 5 5 line-width 2]} >> | |
Allen: 20-Feb-2006 | view layout [ box 400x400 black effect [ draw [ fill-pen red arc 200x200 90x90 0 90 closed fill-pen green arc 200x200 90x90 90 90 closed fill-pen blue arc 200x200 90x90 180 90 closed fill-pen yellow arc 200x200 90x90 270 90 closed ] ] ] view layout [ box 400x400 black effect [ draw [ pen white line-width 2 fill-pen red arc 204x204 150x150 0 90 closed fill-pen green arc 196x204 150x150 90 30 closed fill-pen blue arc 180x190 150x150 120 150 closed fill-pen yellow arc 204x196 150x150 270 90 closed ] ] ] | |
Geomol: 10-Mar-2006 | img: make image! reduce [370x290 white] blk: [pen blue line-width 0.7 line] for t 0.0 2.0 0.01 [s: sine 360 * t append blk as-pair round t * 185 round 290 - (s * 145 + 145)] draw img blk view layout [image img] | |
Anton: 11-Mar-2006 | scale: 10 img: make image! reduce [370x290 white] blk: compose [scale (1 / scale) (1 / scale) pen blue line-width 7 line ] for t 0.0 2.0 0.01 [ s: sine 360 * t append blk as-pair round t * 185 * scale round 290 - (s * 145 + 145) * scale ] draw img blk view layout [image img] | |
MichaelB: 16-Mar-2006 | I tried to create with the following code a circle with a transparent background and save it. I tried some different versions, but currently I have no glue how to achieve this. The point is I need a file with a circle and a transparent background :-) and I thought I quickly do this with Rebol instead of using a paintprogram. So am I doing something wrong ? It's saving the background from the window and if that is set to 'none then it's black ? view layout [ b: box 22x22 effect [ draw [pen red line-width 2 circle 11x11 10] ] across f: field 200 button "Save" [ file-name: to-file f/text unless find/last file-name ".png" [append file-name ".png"] save/png file-name to-image b ] ] | |
Gabriele: 16-Mar-2006 | i: make image! 22x22 i/alpha: 255 draw i [pen red line-width 2 circle 11x11 10] save/png %test.png i | |
[unknown: 10]: 24-Mar-2006 | well i want random collors in my 'draw effect like this -> effect: compose [ merge fit draw [ pen randomcolor + alpha blending line-width 4 line-pattern 1 5 fill-pen randomcolor + alpha blending box 10 10 8 ] but somehow Im unable to do that with compose or reduce... | |
Graham: 3-Jun-2006 | this doesn't look at all like it should translate-draw: func [ height [integer!] blk [block!] /local dr p ][ parse blk [some ['draw set dr block! (parse dr [some [p: pair! (p/1: as-pair p/1/x height - p/1/y) | skip]]) | skip]] blk ] view layout [ origin 0 bx: box 400x400 black effect translate-draw 400 [ draw [ pen red line 50x50 350x50 pen blue line 50x50 50x350 pen yellow line 50x50 100x200 200x150 300x250 350x225 pen white text aliased 10x350 "Y axis" text aliased 320x40 "X axis" ] ] ] | |
Gabriele: 2-Nov-2006 | img: make image! 50x50 img/alpha: 255 ; make bg transparent draw img [pen black line-width 2 circle 25x25 20] save/png %test.png img | |
Jerry: 20-Dec-2006 | According to the DRAW Document, the shape is closed automatically, i.e. as a polygon, unless you specify a move command at the end of the shape block. However, the following example is different. why? view layout [ box 300x300 black effect [draw [anti-alias on pen red fill-pen none shape [move 35x12 curve 35x12 line 53x96 curve 53x96 54x101 57x104 61x104 line 61x108 line 37x108 line 37x104 curve 37x104 42x104 44x103 44x101 curve 44x101 44x100 44x98 44x97 line 38x72 line 19x72 line 14x98 line 14x100 curve 14x100 14x102 16x104 20x104 line 20x108 line 3x108 line 3x104 curve 3x104 7x104 9x102 10x99 line 29x14 move 20x68 curve 20x68 line 37x68 line 29x29]]]] | |
Jerry: 20-Dec-2006 | REBOL[] view layout [ box 128x128 black effect [draw [anti-alias on pen white fill-pen white shape [move 32x19 curve 32x19 33x19 34x19 35x20 curve 35x20 38x22 40x24 40x25 curve 40x25 40x26 39x27 39x28 curve 39x28 38x29 38x31 37x33 curve 37x33 35x38 32x43 28x50 curve 28x50 24x58 19x65 14x70 curve 14x70 9x75 6x77 4x77 curve 4x77 3x77 3x77 3x76 curve 3x76 3x76 3x76 4x75 curve 4x75 8x71 13x64 19x55 curve 19x55 23x48 26x40 29x33 curve 29x33 30x30 31x26 31x22 curve 31x22 31x20 31x19 32x19 move 36x27 curve 36x27 36x27 37x27 38x27 curve 38x27 40x28 43x29 45x30 curve 45x30 48x32 50x33 51x34 curve 51x34 51x36 52x37 52x38 curve 52x38 52x39 52x40 51x41 curve 51x41 51x42 50x43 49x43 curve 49x43 49x43 48x42 47x42 curve 47x42 46x41 44x39 42x36 curve 42x36 40x33 38x31 37x30 curve 37x30 36x29 35x28 35x28 curve 35x28 35x27 35x27 36x27 move 42x51 curve 42x51 43x51 44x52 46x52 curve 46x52 48x53 50x54 50x54 curve 50x54 50x55 48x56 46x56 curve 46x56 44x56 43x57 41x57 curve 41x57 40x57 38x58 33x59 curve 33x59 31x59 29x59 28x59 curve 28x59 27x59 25x59 24x59 curve 24x59 23x58 22x58 22x57 curve 22x57 22x56 23x56 26x56 curve 26x56 31x55 35x53 40x52 curve 40x52 41x52 42x51 42x51 move 44x66 curve 44x66 45x66 46x66 49x67 curve 49x67 51x67 52x68 52x69 curve 52x69 52x70 51x70 48x71 curve 48x71 46x71 43x72 42x72 curve 42x72 40x72 36x73 30x74 curve 30x74 27x75 24x75 23x75 curve 23x75 21x75 20x75 19x75 curve 19x75 17x74 16x74 16x73 curve 16x73 16x72 17x71 20x71 curve 20x71 27x70 34x69 41x67 curve 41x67 42x66 44x66 44x66 move 31x57 curve 31x57 33x57 34x57 37x58 curve 37x58 38x59 39x60 39x61 curve 39x61 39x61 39x62 39x63 curve 39x63 38x64 38x65 38x66 line 37x96 line 32x96 line 31x64 curve 31x64 31x63 31x62 30x60 curve 30x60 29x60 29x59 29x59 curve 29x59 29x58 30x57 31x57 move 18x82 curve 18x82 18x82 19x82 20x82 curve 20x82 23x83 25x84 26x85 curve 26x85 27x86 28x87 28x89 curve 28x89 28x92 27x93 25x93 curve 25x93 24x93 23x93 23x92 curve 23x92 21x91 19x88 17x83 curve 17x83 17x83 16x83 16x82 curve 16x82 17x82 17x82 18x82 move 46x76 curve 46x76 46x76 48x76 49x77 curve 49x77 51x79 52x80 52x80 curve 52x80 52x81 52x81 51x81 curve 51x81 49x83 46x86 42x89 curve 42x89 41x89 41x89 41x89 curve 41x89 40x89 40x89 40x89 curve 40x89 40x88 40x88 40x88 curve 40x88 42x86 43x84 43x82 curve 43x82 44x80 45x78 45x76 curve 45x76 46x76 46x76 46x76 move 10x97 curve 10x97 11x97 12x98 13x98 curve 13x98 15x98 16x98 16x98 curve 16x98 17x98 19x98 21x97 curve 21x97 33x94 41x92 45x90 curve 45x90 46x90 47x89 48x89 curve 48x89 50x89 51x90 51x91 curve 51x91 51x92 50x93 48x94 curve 48x94 35x99 28x101 28x102 curve 28x102 26x103 23x104 21x105 curve 21x105 20x106 19x107 18x107 curve 18x107 17x107 15x106 12x104 curve 12x104 10x101 9x100 9x99 curve 9x99 9x98 9x97 10x97 move 75x12 curve 75x12 75x12 76x12 77x12 curve 77x12 79x12 81x13 83x14 curve 83x14 86x15 87x16 88x17 curve 88x17 89x18 89x19 89x20 curve 89x20 89x21 89x23 88x25 curve 88x25 87x26 86x27 85x27 curve 85x27 84x27 84x27 83x26 curve 83x26 82x25 81x24 80x21 curve 80x21 78x18 76x16 75x14 curve 75x14 75x14 74x13 74x13 curve 74x13 74x12 74x12 75x12 move 104x22 curve 104x22 104x22 106x23 108x23 curve 108x23 110x25 112x26 112x27 curve 112x27 111x28 110x28 108x29 curve 108x29 101x29 93x29 85x31 curve 85x31 80x31 73x33 65x35 curve 65x35 63x35 63x35 62x35 curve 62x35 61x35 59x35 57x34 curve 57x34 55x33 55x32 55x32 curve 55x32 55x31 55x31 57x31 curve 57x31 73x28 86x26 97x24 curve 97x24 101x23 103x22 104x22 move 59x32 curve 59x32 59x32 61x32 64x32 curve 64x32 66x33 67x34 67x35 curve 67x35 66x37 66x38 66x38 curve 66x38 65x54 63x67 61x77 curve 61x77 59x86 57x93 54x100 curve 54x100 51x106 47x111 44x114 curve 44x114 43x115 43x115 42x115 curve 42x115 42x115 42x115 42x115 curve 42x115 45x110 47x104 49x99 curve 49x99 53x89 55x79 57x69 curve 57x69 58x60 59x50 59x40 curve 59x40 59x39 59x37 58x36 curve 58x36 57x35 57x34 57x33 curve 57x33 57x33 58x32 59x32 move 102x35 curve 102x35 104x35 106x36 109x38 curve 109x38 110x39 111x40 111x40 curve 111x40 111x41 111x42 110x43 curve 110x43 109x44 109x46 108x47 curve 108x47 106x55 105x59 105x60 curve 105x60 104x63 102x64 101x64 curve 101x64 100x64 99x63 99x62 curve 99x62 98x61 98x60 98x59 curve 98x59 98x59 98x58 98x57 curve 98x57 99x56 100x53 100x49 curve 100x49 101x47 101x45 101x43 curve 101x43 101x42 100x41 99x41 curve 99x41 97x41 95x41 91x42 curve 91x42 82x44 77x45 75x45 curve 75x45 73x45 72x45 71x44 curve 71x44 70x44 70x43 70x43 curve 70x43 70x42 71x41 73x41 curve 73x41 78x41 86x39 97x36 curve 97x36 100x35 102x35 102x35 move 113x46 curve 113x46 113x46 115x46 117x47 curve 117x47 119x49 121x50 121x51 curve 121x51 120x52 119x52 117x52 curve 117x52 110x52 103x53 94x54 curve 94x54 89x54 83x56 75x57 curve 75x57 73x58 72x58 72x58 curve 72x58 70x58 68x57 67x56 curve 67x56 65x56 64x55 64x54 curve 64x54 64x54 65x54 66x53 curve 66x53 82x51 96x49 106x47 curve 106x47 110x46 112x46 113x46 move 99x60 curve 99x60 100x60 101x60 102x61 curve 102x61 104x62 106x63 106x64 curve 106x64 105x64 104x65 103x65 curve 103x65 98x65 94x65 88x66 curve 88x66 85x66 81x67 76x68 curve 76x68 75x68 74x68 74x68 curve 74x68 73x68 72x68 70x67 curve 70x67 69x67 68x66 68x66 curve 68x66 68x65 69x65 70x65 curve 70x65 80x63 88x62 95x61 curve 95x61 97x60 99x60 99x60 move 65x75 curve 65x75 66x75 68x75 70x76 curve 70x76 72x77 73x77 73x78 curve 73x78 73x79 73x79 73x80 curve 73x80 72x80 72x82 72x84 curve 72x84 72x89 72x94 71x98 curve 71x98 70x102 69x106 68x109 curve 68x109 66x112 65x114 63x116 curve 63x116 61x118 60x119 60x119 curve 60x119 60x119 59x118 59x118 curve 59x118 59x118 59x118 60x117 curve 60x117 61x114 62x111 63x108 curve 63x108 64x104 65x100 65x96 curve 65x96 66x92 66x88 66x84 curve 66x84 66x81 66x79 65x78 curve 65x78 64x77 64x77 64x76 curve 64x76 64x75 64x75 65x75 move 105x70 curve 105x70 105x70 107x71 110x72 curve 110x72 113x74 114x75 114x76 curve 114x76 114x77 113x77 113x78 curve 113x78 112x81 111x85 111x92 curve 111x92 111x96 111x99 111x101 curve 111x101 112x102 112x104 112x106 curve 112x106 112x111 111x115 109x118 curve 109x118 107x121 105x123 103x123 line 100x111 curve 100x111 101x111 102x110 103x110 curve 103x110 104x108 105x103 105x96 curve 105x96 105x91 104x86 104x79 curve 104x79 104x77 104x77 103x76 curve 103x76 103x76 102x76 101x76 curve 101x76 100x76 97x76 92x77 curve 92x77 84x78 79x79 75x79 curve 75x79 74x80 73x80 72x80 curve 72x80 71x80 70x80 69x79 curve 69x79 68x78 68x77 68x77 curve 68x77 68x77 69x76 70x76 curve 70x76 75x76 82x75 89x74 curve 89x74 94x72 99x71 101x70 curve 101x70 103x70 105x70 105x70 move 93x109 curve 93x109 93x109 93x109 94x109 curve 94x109 97x110 99x111 100x111 line 103x123 curve 103x123 102x123 102x122 101x121 curve 101x121 98x117 96x114 93x111 curve 93x111 92x110 92x110 92x110 curve 92x110 92x109 92x109 93x109 move 98x83 curve 98x83 98x83 100x83 102x83 curve 102x83 104x84 105x84 105x85 curve 105x85 105x86 103x86 101x87 curve 101x87 99x87 97x87 95x88 curve 95x88 94x88 90x89 84x90 curve 84x90 80x90 78x91 77x91 curve 77x91 75x91 74x91 73x90 curve 73x90 72x90 71x89 71x89 curve 71x89 71x88 72x87 74x87 curve 74x87 81x86 88x85 95x83 curve 95x83 97x83 98x83 98x83 move 97x94 curve 97x94 98x94 99x94 101x94 curve 101x94 103x95 104x95 104x96 curve 104x96 104x97 103x97 101x98 curve 101x98 98x98 96x98 94x99 curve 94x99 93x99 89x99 83x100 curve 83x100 79x101 77x101 75x101 curve 75x101 74x101 73x101 72x101 curve 72x101 70x100 70x100 70x99 curve 70x99 70x98 71x98 73x98 curve 73x98 80x97 87x96 94x94 curve 94x94 96x94 97x94 97x94 move 83x32 curve 83x32 84x32 85x32 88x33 curve 88x33 90x34 91x35 91x36 curve 91x36 91x37 91x37 90x39 curve 90x39 90x42 89x45 89x49 line 89x90 curve 89x90 89x98 88x105 87x111 curve 87x111 86x115 86x117 85x117 curve 85x117 84x117 83x116 83x113 curve 83x113 83x108 83x102 83x94 line 83x43 curve 83x43 83x40 82x37 82x35 curve 82x35 81x34 81x33 81x33 curve 81x33 81x32 82x32 83x32]]]] | |
Jerry: 22-Jan-2007 | REBOL[] font-C: make face/font [style: [ bold ] size: 64] draw-block: [ ] for i 0 9 1 [ append draw-block compose/deep [ pen (to-tuple reduce [ 255 to-integer (255 / 10.0 * (i + 1)) to-integer (255 / 10.0 * (i + 1)) to-integer 255 - (255 / 10.0 * (i + 1)) ] ) line-width (10 - i) line-join round font font-c text 30x0 vectorial "REBOL BAR" ] ] view/title layout [ box black 450x200 effect [ draw draw-block ] ] "NEON" | |
Oldes: 22-Jan-2008 | You are missing line-pattern in your code... this is working: view layout [box 120x70 effect [draw [pen black green line-pattern 1 5 polygon 0x0 119x0 119x69 0x69]]] | |
NormanDep: 30-Mar-2008 | Yes Graham it works here too ;-) but must be explicit defined with make font: rebol [] fnt1: make face/font [ name: "/usr/X11R6/lib/X11/fonts/TTF/VeraMono.ttf" size: 32 ] fnt2: make face/font [ name: "/usr/X11R6/lib/X11/fonts/TTF/Vera.ttf" size: 32] view layout [ origin 0 box 400x100 effect [ draw [ pen black font fnt1 text anti-aliased 0x0 "Rebol Rulez!" pen blue silver fill-pen red line-pattern 10 10 line-width 2 font fnt2 text vectorial 0x30 "Rebol Rulez!" ] ] ] I took me some time to find this Issue again... | |
Maxim: 18-Apr-2010 | NEW bug.. (but not a crash) using vectorial fonts with text ending in spaces, corrupts color transparency of any following draw element !!! example script: rebol [ title: "Vectorial text corrupts transparency" note: "bug occurs only when text ends with one or more spaces!!!" ] myfont: make face/font [] ; COLOR IS TRANSPARENT box-bg: green + 0.0.0.128 view layout [ box 350x50 effect [ draw [ font myfont ;draw crosses line-width 1 pen blue line 10x29 109x05 line 10x05 109x29 line 110x29 209x05 line 110x05 209x29 line-width 2 pen 0.127.0 fill-pen box-bg box 10x05 109x29 3 line-width 0 pen black text "1 " 47x07 vectorial ;line 0x0 0x0 line-width 2 pen 0.127.0 ;--------- ; following color alpha is WRONGß fill-pen box-bg box 110x05 209x29 3 line-width 0 pen black text "2" 154x07 vectorial ] ] ] | |
JoshF: 2-Sep-2010 | Hi! Is there a good way to draw an image with an alpha channel? In the example below, I would expect a green outlined circle with a transparent background so I could composite it over the red box in the layout (for instance). However, I get solid (and very un-transparent) black. x: draw 512x512 [pen green line-width 3 fill-pen blue circle 256x256 200] view layout/tight [box 512x512 red at 0x0 image x] Any ideas? Thanks very much! | |
Gabriele: 13-Oct-2010 | REBOL/View 2.7.7.4.2 6-Jan-2010 Copyright 2000-2010 REBOL Technologies. All rights reserved. REBOL is a trademark of REBOL Technologies. WWW.REBOL.COM Type desktop to start the Viewtop. >> view layout [box effect [draw [pen black line 10x10 20x20]]] Segmentation fault | |
Maxim: 4-Nov-2010 | view layout [box 200x200 effect [ draw [ push [ scale 0.106 0.106 pen black fill-pen red line-width 14 box 0x0 1000x1000 fill-pen white pen none circle 500x500 170 ] ] ]] | |
DideC: 31-Jan-2011 | The following code cause an error if you click on the window (XP SP2) : view layout [box effect [ draw [ pen none navy line-pattern 2 7 2 3 ]]] Does others could confirm the problem ? | |
Group: Linux ... [web-public] group for linux REBOL users | ||
Cyphre: 22-Mar-2006 | fnt1: make face/font [ name: "/usr/share/fonts/truetype/freefont/FreeSans.ttf" size: 32 ] fnt2: make face/font [ name: "/usr/share/fonts/truetype/freefont/FreeSansBoldOblique.ttf" size: 64 ] view layout [ origin 0 box snow 400x100 effect [ draw [ pen black font fnt1 text anti-aliased 0x0 "Rebol Rulez!" pen blue yellow fill-pen red line-pattern 10 10 line-width 2 font fnt2 text vectorial 0x30 "Rebol Rulez!" ] ] ] | |
Gabriele: 20-Feb-2010 | Linux View 2.7.7: >> view layout [box snow effect [draw [fill-pen black pen none shape [move 0x6 'line 6x6 'line 0x-12]]]] Segmentation fault | |
ManuM: 27-Aug-2010 | Hello Max. Yes, I have used sometimes DRAW on Linux. Try this, work for me at Kubuntu. do %rebgui.r if system/version/4 = 4 [ face/font/name: "/usr/share/fonts/truetype/freefont/FreeSans.ttf" ] example: [ font face/font ] append example [ pen blue line 20x70 30x50 40x55 50x40 60x60 70x55 80x70 90x50 100x40 110x50 120x70 130x65 140x60 150x55 160x50 170x30 180x70 190x50 200x40 210x50 220x70 230x65 240x60 250x55] append example [ pen red fill-pen red box 20x75 22x60 box 30x75 32x50 box 40x75 42x40 box 60x75 62x40 box 70x75 72x60 box 80x75 82x65 box 90x75 92x40 ] append example [ box 100x75 102x60 box 110x75 112x60 box 120x75 122x60 box 140x75 142x40 box 150x75 152x45 box 160x75 162x40 box 170x75 172x60 box 180x75 182x65 box 190x75 192x40 ] append example [ pen green fill-pen green box 50x75 52x30 box 130x75 132x50 ] append example [ pen black text 10x10 "Transazioni" ] append example [ text 30x30 "$200" text 30x50 "$100" ] append example [ line 20x25 20x75 line 15x35 25x35 line 15x55 25x55 ] append example [ line 20x75 310x75 ] append example [ text 20x80 "28-Jul-2010" text 250x80 "26-Sep-2010" ] append example [ pen blue text 300x10 "Cassa" ] append example [ text 320x30 "$2000" text 320x50 "$1000" ] append example [ line 310x25 310x75 line 305x35 315x35 line 305x55 315x55 ] display "Example" [ aaa_stats: box white 100x30 effect [ draw example ] button "ok" tab button "cancel" [ unview/all ] ] do-events | |
Geocaching: 8-Mar-2011 | Hello, I encounter a problem with the draw dialect under linux (rebol/view 2.7.8). I have tried the following code from the official documentation: view layout [ box black 100x100 effect [ draw [ pen red line 30x30 50x20 70x70 40x50 pen blue box 20x20 80x80 fill-pen 0.100.0 box 20x60 40x80 pen white text 8x25 "Example" fill-pen gold flood 2x2 ] ] ] | |
Group: AGG ... to discus new Rebol/View with AGG [web-public] | ||
Guest: 3-Jan-2005 | pen doesn't make contour around filled polygons Rebol/View crashes when drawing filled poligons partially out of visible face area = you cannot zoom/move any object out of face borders - very annoying problem (this problem doesn't crash latest Rebol/Link...instead of it interpret shows "not enough memory" error) DRAW's 'text command doesn't recognize underlined font style (manipulating text will be explained in the next issue of ZINE...Watch out!) my enhancement dreams: missing 'ellipse command - why there is no posible to make elipse when 'circle is available?!? missing 'point or 'dot command - currently you have to write [line 10x10 10x10] to make single dot at 10x10 coords on the screen missing 'round command - DRAW cannot make arcs in a simple way missing 'fill-pattern command - for simple texturing of filled polygons | |
Cyphre: 3-Jan-2005 | ups, the last line should be: view layout [box 50x50 effect [draw [pen none fill-pen red box 0x0 50x50]]] | |
DideC: 13-Jun-2005 | n: 1 plot: [ pen black line-width n arc 190x130 60x60 90 270 arc 390x130 60x60 180 270 arc 190x330 60x60 0 270 arc 390x330 60x60 270 270 ] view center-face layout [ bx: box 580x450 effect [draw plot] sl: slider 580x20 [ n: 1 + (sl/data * 70) show bx ] ] | |
DideC: 13-Jun-2005 | n: 0 plot: [ pen black line-width 2 arc 190x130 60x60 90 n closed arc 390x130 60x60 180 n closed arc 190x330 60x60 0 n closed arc 390x330 60x60 270 n closed ] view center-face layout [ bx: box 580x450 effect [draw plot] sl: slider 580x20 [ n: 1 + (sl/data * 360) show bx ] ] | |
DideC: 13-Jun-2005 | n: 0 plot: [ fill-pen red pen black line-width 5 arc 190x130 60x60 90 n closed arc 390x130 60x60 180 n closed arc 190x330 60x60 0 n closed arc 390x330 60x60 270 n closed ] view center-face layout [ bx: box 580x450 effect [draw plot] sl: slider 580x20 [ n: 1 + (sl/data * 360) show bx ] ] | |
DideC: 13-Jun-2005 | rebol [title: "ARC's Draw command test"] begin: angle: 0 lines?: 'closed plot: [ fill-pen red pen black line-width 5 arc 100x100 90x90 begin angle lines? ] view center-face layout [ bx: box 200x200 effect [draw plot] across style vt vtext 60 right vt "Start:" scroller 392x16 [angle: face/data * 360 show bx] return vt "Angle:" scroller 392x16 [begin: face/data * 360 show bx] return vt "Type :" toggle "open it" "closed it" [either face/data [lines?: none] [lines?: 'closed] show bx] ] | |
Anton: 22-Jul-2005 | view layout [b: box 200x200 effect [draw [scale 1 1 pen 192.0.0 line-width 32 line 10x10 190x190]] scroller 200x20 [b/effect/draw/scale: b/effect/draw/3: face/data show b]] | |
Anton: 22-Jul-2005 | view layout [b: box 200x200 effect [draw [transform 0 0x0 1 1 0x0 pen 192.0.0 line-width 32 line 10x10 190x190]] scroller 200x20 [change/dup at b/effect/draw 4 face/data 2 show b]] | |
Anton: 24-Jul-2005 | rebol [ date: 24-Jul-2005 author: "Anton Rolls" comment: { Investigating why adding/removing 'merge from effect block seems to change line-width on arc, circle etc.: ToDo: - try to - It looks like the AGG anti-aliasing is with the default window background color ? When MERGE is added, then it's with the actual color that is merged (seems ok and good to me). - so try to set b1/color so it's the same as the color anti-aliased against in the merged version Perhaps default window background color (200.200.200) is close to the default agg anti-aliasing color ? (do not use custom window color) - try a simple LINE - report to RAMBO or AGG group - submit to RAMBO This shows that the addition of 'merge seems to add 0.5... (?) or some scaled factor to the line-width: } ] effect-blk: [ draw [ pen black line-width 0 translate 25x25 scale 1 1 circle 0x0 24 ;arc 0x0 24x24 0 270 ] ] make-2nd-effect: func [/local result][ result: copy/deep effect-blk insert result 'merge ;result/draw/line-width: result/draw/line-width - 0.5 ; <- even with this they don't look quite the same result/draw/line-width: result/draw/line-width - any [attempt [correction-scr/data * 0.1 + 0.5] 0] result ] refresh: does [ b2/effect: make-2nd-effect show [b1 b2] big1/image: to-image b1 big2/image: to-image b2 diff/image: xor big1/image big2/image same-txt/text: join "same? " big1/image = big2/image show [big1 big2 diff same-txt] ] view/new window: center-face layout compose/only [ across label 80 "scale" scroller 200x20 with [data: 1][ change/dup next find b1/effect/draw 'scale face/data 2 refresh ] return label 80 "line-width" scroller 200x20 [ b1/effect/draw/line-width: face/data * 4 refresh ] return label "line-width correction" correction-scr: scroller 200x20 [ refresh ] return b1: box 50x50 [refresh] effect (effect-blk) b2: box 50x50 [refresh] effect (make-2nd-effect) same-txt: text 200 return big1: image 200x200 big2: image 200x200 return diff: image 200x200 ] refresh do-events | |
shadwolf: 5-Dec-2005 | stylize/master [ rte: box with [ color: gray tampon: "" buffer: [] line-index: 0 char-sz: none current-text-offset: 0x0 cursor-text-offset: 0x0 max-text-offset: 0x0 text-color: black pane: [] set-font-style: func [ font-s [word!]] [ switch font-s [ bold [insert tail buffer compose/deep [[ [size: 11 style: [(font-s)]] (either cursor-text-offset/x <> 0 [cursor-text-offset] [as-pair 0 (line-index * 20)]) "" ]]] normal [insert tail buffer compose/deep [[ [size: 11 style: []] ( either cursor-text-offset/x <> 0 [cursor-text-offset][as-pair 0 (line-index * 20)]) "" ]]] underline[insert tail buffer compose/deep [[ [size: 11 style: [(font-s)]] (either cursor-text-offset/x <> 0 [cursor-text-offset][as-pair 0 (line-index * 20)]) "" ]]] italic [insert tail buffer compose/deep [[ [size: 11 style: [(font-s)]] (either cursor-text-offset/x <> 0 [cursor-text-offset][as-pair 0 (line-index * 20)]) "" ]]] ] ] feel: make feel [ engage: func [f a e] [ switch a [ key [ probe e/key switch/default e/key [ #"^M" [ line-index: line-index + 1 f/current-text-offset: as-pair 0 f/current-text-offset/y + 20] insert tail f/buffer compose/deep [[ [size: 11 style: [(font-s)]](as-pair 0 (line-index * 20)) "" ]] ][ f/tampon: rejoin [f/tampon to-string e/key] draw-text: [] print "f/buffer:" probe f/buffer foreach line-to-draw f/buffer [ print "line-to-draw" ;line-to-draw: f/buffer/1 ;probe line-to-draw ;set [font-style start-offset text-to-show ] line-to-draw font-style: line-to-draw/1 start-offset: line-to-draw/2 line-to-draw/3: rejoin [line-to-draw/3 to-string e/key] ;probe font-style ;probe start-offset font-obj: make face/font font-style ;probe font-obj text-to-show: line-to-draw/3 ;probe text-to-show insert tail draw-text compose [ font (font-obj) pen (f/text-color) text (start-offset) (text-to-show)] ] ;print "draw-text:" ;probe draw-text ;draw-text: compose [ pen (f/text-color) text (f/current-text-offset) (f/tampon)] f/effect: make effect reduce [ 'draw draw-text ] draw-text: none ;probe f/current-text-offset f/cursor-text-offset: as-pair (f/cursor-text-offset/x + 9) f/current-text-offset/y ;show f ] f/pane/1/offset: f/cursor-text-offset show f ] down [ ;insert f/buffer compose [(as-pair 0 (line-index * 20)) ""] focus f show f ] ] ] ] append init [ insert buffer compose/deep [[[size: 11 style: []] (as-pair 0 (line-index * 20)) ""]] probe buffer insert pane make face [ color: red size: 2x20 offset: cursor-text-offset ] show self ] ] ] view layout [ across btn "bold" [test-rte/set-font-style 'bold] btn "underline" [test-rte/set-font-style 'underline] btn "italic" [test-rte/set-font-style 'italic] btn "normal" [test-rte/set-font-style 'normal] return test-rte: rte 300x300 ] | |
Josh: 15-Dec-2005 | (Warning, this will lock up whatever instance of rebol you are running it in) sp: 0 b: layout [ c: box 400x400 white effect [ draw [ 'pen 255.23.23 23.255.23 'line-pattern 1 sp 'curve 50x350 200x50 350x350 200x300 ] ] button "boom" [sp: sp - 1 show c] ] view b | |
Cyphre: 30-Dec-2005 | Ok, so here it is: -fixed image keying bug (swapped color components in keying tuple!) -line width is now now changing according to scale -fixed rendering of transformed images(now uses aplha premultiplied data) -fixed LINE-PATTERN bug (multiple line patterns in DRAW block should work properly now) -fixed MATRIX bug(wrong matrix calcualtion was corrected in this case) -fixed SKEW command inconsistency (now it takes degrees as arguments instead of radians) -fixed FILL-PEN bug when filling images (now it doesn't render images upside down) -fixed ANTI-ALIAS cmd(now it is possible to switch this mode within one DRAW block) -removed POP command (was obsolete, PUSH with block! arg is used instead) -fixed fill/outline pixel aligning problem -fixed visual bug when rendering circle with line-width > 1 -fixed text character encoding problem -improved gradients: added REFLECT and REPEAT modes, example: view layout [ origin 0 box 400x460 effect [ draw [ pen none fill-pen linear 10x10 0 190 0 1 1 black red green blue black box 10x10 390x90 fill-pen linear 10x160 0 190 0 1 1 black red green blue black repeat box 10x100 390x180 fill-pen linear 10x310 0 190 0 1 1 black red green blue black reflect box 10x190 390x270 fill-pen radial 80x350 0 20 0 1 1 black red green blue black circle 80x350 70 fill-pen radial 190x350 0 20 0 1 1 black red green blue black repeat circle 190x350 70 fill-pen radial 320x350 0 20 0 1 1 black red green blue black reflect circle 320x350 70 ] ] ] | |
Rebolek: 8-Jan-2006 | view layout [ box 640x480 effect [ draw [line-width 48 pen 0.132.28.0 0.0.0.0 arc 0x0 90x90 358.163265306122 90] ] ] | |
Cyphre: 18-May-2006 | view layout [ origin 0 bx: box 400x400 black effect [ draw [ translate 0x400 scale 1 -1 pen red line 50x50 350x50 pen blue line 50x50 50x350 pen yellow line 50x50 100x200 200x150 300x250 350x225 ] ] ] | |
Cyphre: 19-May-2006 | translate-draw: func [ height [integer!] blk [block!] /local dr p ][ parse blk [some ['draw set dr block! (parse dr [some [p: pair! (p/1: as-pair p/1/x height - p/1/y) | skip]]) | skip]] blk ] view layout [ origin 0 bx: box 400x400 black effect translate-draw 400 [ draw [ pen red line 50x50 350x50 pen blue line 50x50 50x350 pen yellow line 50x50 100x200 200x150 300x250 350x225 pen white text aliased 10x350 "Y axis" text aliased 320x40 "X axis" ] ] ] | |
Dockimbel: 21-May-2007 | view layout [ box effect [ draw [ pen black red push [shape [move 0x0 line 50x50]] ] ] ] | |
Anton: 9-Oct-2008 | view layout [box effect [draw [pen red line-width 2 shape [line 0x0 10x0 10x10 0x10] pen green shape [line 5x0 10x5 5x15 0x5]]]] | |
amacleod: 9-Oct-2008 | I'm doing something like this: view layout [ b: box effect [draw [pen red fill-pen red line-width 2 shape [line 0x0 40x0 40x40 0x40] ] ] btn "append draw" [append b/effect/draw compose ['pen green 'fill-pen green 'shape ['line 5x0 30x5 5x25 0x20]]show b] ] Its much more complicated as I'm painting highlights on a series of faces in a panel. I go back and highlight in another color where a specified word is found. The hi-lite shows if its on a section of text not yet painted but not if it falls on painted text. The above example works! so it must be some where else in my app... Thanks. I'll look it over... | |
Anton: 9-Oct-2008 | view layout [box effect [draw [pen red line-width 5 line 0x0 100x100]] "hello"] | |
amacleod: 9-Oct-2008 | Actually I don't like this behavior...its too complicated to remove it again.Back to my original plan of moving and resizing a box form face to face... view layout [ bx: box 100.100.255 0x0 b: box effect [draw [pen red fill-pen red line-width 2 shape [line 0x0 40x0 40x40 0x40]]] at 40x40 text "Hello World" btn "append draw" [append b/effect/draw compose ['pen green 'fill-pen green 'shape ['line 5x0 30x5 5x25 0x20]]show b] btn "Moving box" [bx/offset: 20x20 bx/size: 90x90 show bx] ] for example. Now if I draw the box after the face it covers the textt which I want to avoid too.view layout [ bx: box 100.100.255 0x0 b: box effect [draw [pen red fill-pen red line-width 2 shape [line 0x0 40x0 40x40 0x40]]] at 40x40 text "Hello World" btn "append draw" [append b/effect/draw compose ['pen green 'fill-pen green 'shape ['line 5x0 30x5 5x25 0x20]]show b] btn "Moving box" [bx/offset: 20x20 bx/size: 90x90 show bx] | |
Group: !RebGUI ... A lightweight alternative to VID [web-public] | ||
Vincent: 5-Mar-2005 | check: make face [ edge: none data: false para: make para [origin: 14x0] effect: copy [draw [ pen 96.96.96 fill-pen 255.255.255 box 0x0 12x12 pen none line 0x7 5x12 11x0 line 0x6 6x12 12x0 ]] feel: make feel [ redraw: func [face act pos][ if act = 'show [ face/effect/draw/9: either do face/data [255.0.0][none] ] ] engage: func [face act event][ if event/type = 'down [ face/data: not do face/data show face ] ] ] ] | |
shadwolf: 11-Apr-2005 | tab-panel: make face [ color: none pane: [] l-arw: none r-arw: none dir-buttons: false feel: make default-feel [ redraw: function [face act pos] [test-size test-wid] [ if act = 'show [face/pane/1/size: face/size - 0x20 ; ; test-wid: face/pane/1 ; test-size: test-wid/size/x ; if greater? test-size face/size/x [ ; either not dir-buttons [ ; dir-buttons: true ; insert tail face/pane face/l-arw: make arrow [ ; size: 20x20 ; offset: as-pair (face/size/x - 40) 0 ; data: 'left ; action: [print "you clicked left" ] ; ] do face/l-arw/init ; insert tail face/pane face/r-arw: make arrow [ ; size: 20x20 ; offset: as-pair (face/size/x - 20) 0 ; action: [print "you clicked right" ] ; data: 'right ; ] do face/r-arw/init ; ][ ; face/r-arw/offset: as-pair (face/size/x - 20) 0 ; face/l-arw/offset: as-pair (face/size/x - 40) 0 ; ] ; ] ; print "la liste des bouttn est plus grande que ce que l'on voit!!!" ] ] ] init: has [tab-offset last-tab] [ ; create main display area insert pane make face [ offset: 0x20 edge: default-edge] ; add tabs tab-offset: 0x0 insert tail pane make face [ offset: 0x0 pane: [] color: none ] container: last pane insert container/pane make face [ offset: 0x0 pane: [] color: none] foreach [title spec] data [ insert tail container/pane/1/pane make face [ offset: tab-offset size: 1x20 pane: [] text: title effect: reduce ['round edge-color 5 'draw copy []] resize: none font: make default-font [align: 'center valign: 'bottom] para: default-para feel: make default-feel [ over: func [face act pos] [ either act [ insert face/effect/draw compose [ ; compose required for AGG betas pen over-color line 3x1 (as-pair face/size/x - 4 1) line 2x2 (as-pair face/size/x - 3 2) line 1x3 (as-pair face/size/x - 2 3) ] show face ][ if face/parent-face/parent-face/parent-face/pane/1/pane <> face/data [ ; clear unless selected clear face/effect/draw show face ] ] ] engage: function [face act event] [pf old-face] [ if event/type = 'down [ pf: face/parent-face pf3: pf/parent-face/parent-face if pf3/pane/1/pane = face/data [return] ; has a new tab been selected? clear face/effect/draw old-face: pick pf/pane pf3/data ; find previous tab old-face/resize: pf3/size ; remember last size old-face/size: old-face/size - 0x1 ; deflag old clear old-face/effect/draw face/size: face/size + 0x1 ; flag new face/feel/over face true 0x0 pf3/data: index? find pf/pane face ; set new pane# pf3/pane/1/pane: face/data ; init tab panel if pf3/size <> face/resize [ ; recursive resize span-resize pf3/pane/1 pf3/size - face/resize face/resize: pf3/size ] show pf3 ] ] ] ] last-tab: last container/pane/1/pane last-tab/size/x: 10 + first size-text last-tab ; set tab title width display/layout "" spec last-tab ; generate tab spec into tab pane last-tab/data: last-tab/pane ; swap pane into data last-tab/pane: none ; clear pane last-tab/resize: size ; original panel size tab-offset/x: tab-offset/x + last-tab/size/x ; set offset for next tab title ] print "size et countainer a la con !!" probe size/x container/size: as-pair size/x 20 probe container/size/x container/pane/1/size: container/size container/pane/1/pane/1/size: container/pane/1/pane/1/size + 0x1 ; flag 1st tab data: 1 ; set pane# pane/1/pane: container/pane/1/pane/1/data ; init tab panel container/pane/1/pane/1/feel/over container/pane/1/pane/1 true 0x0 ; flag first as active ] ] | |
Anton: 23-Apr-2006 | ;init: make function! [] [ ; <- this multi-arg spec notation will be broken in rebol 3 init: func [] [ ; <- but this will still work font/color: colors/menu ; note: if you recalculate the draw block in feel/redraw instead, that allows dynamic font-size changes insert effect/draw compose [ pen (colors/edge) ;box (as-pair 0 sizes/cell * 2 - 2) (size - 1x1) ; -2 accounts for para/margin/y, I think box (as-pair 0 ((second size-text self) / 2)) (size - 1x1) ; blank out the portion of the top edge of the box where the text is pen none ; <- this will be set later by feel/redraw ;line (-2x-2 + as-pair sizes/cell * 2 sizes/cell * 2) (as-pair sizes/cell * 2 + first size-text self sizes/cell * 2 - 2) line (as-pair (sizes/cell * 2 - 2) ((second size-text self) / 2)) ; -2 for space between line and title text (on the left side) (as-pair (sizes/cell * 2 + first size-text self) ((second size-text self) / 2)) ] | |
DanielP: 3-Mar-2008 | REBOL [] do %rebgui.r append-widget make rebface [ draw [ pen yellow line 20x20 80x80 ] | |
DanielP: 3-Mar-2008 | ** Script Error: draw expected image argument of type: image pair ** Near: draw [ pen yellow line 20x20 80x80 ] | |
Ashley: 3-Mar-2008 | append-widget [ my-widget: make rebface [ effect: [draw [pen yellow line 20x20 80x80]] ] ] | |
Group: SVG Renderer ... SVG rendering in Draw AGG [web-public] | ||
shadwolf: 23-Jun-2005 | REBOL [ Title: "SVG Demo" Owner: "Ashley G. Trüter" Version: 0.0.1 Date: 21-Jun-2005 Purpose: "Loads and displays a resizeable SVG file." History: { 0.0.1 Initial release } Notes: { Tested on very simple SVG icons Only a few basic styles / attributes / commands supported Does not handle sizes in units other than pixels (e.g. pt, in, cm, mm, etc) SVG path has an optional close command, "z" ... AGG shape equivalent auto-closes load-svg function needs to be totally refactored / optimized ... *sample only* } ] ; The following commands are available for path data: ; ; M = moveto ; L = lineto ; H = horizontal lineto ; V = vertical lineto ; C = curveto ; S = smooth curveto ; Q = quadratic Belzier curve ; T = smooth quadratic Belzier curveto ; A = elliptical Arc ; Z = closepath ;print: none ; comment out this line to enable debug messages load-svg: function [svg-file [file! string!] size [pair!]] [ id defs x y to-color to-byte draw-blk append-style svg-size scale-x scale-y ][ xml: either string? svg-file [parse-xml svg-file] [ unless %.svg = suffix? svg-file [to error! "File has an invalid suffix!"] parse-xml read svg-file ] unless xml/3/1/1 = "svg" [to error! "Could not find SVG header!"] ;unless find ["id" "xmlns"] xml/3/1/2/1 [to error! "Could not find ID header!"] ;unless xml/3/1/3/1/1 = "defs" [to error! "Could not find DEFS header!"] id: xml/3/1/2 defs: xml/3/1/3 ; ; --- Parse SVG id ; svg-size: either find ["32pt" "48pt" "72pt"] select id "width" [ switch select id "width" [ "72pt" [120x120] "48pt" [80x80] "32pt" [60x60] ] ][ as-pair to integer! any [select id "width" "100"] to integer! any [select id "height" "100"] ] x: to integer! any [select id "x" "0"] y: to integer! any [select id "y" "0"] scale-x: size/x / svg-size/x scale-y: size/y / svg-size/y ; ; --- Helper functions ; to-color: func [s [string!]] [ ; converts a string in the form "#FFFFFF" to a 4-byte tuple to tuple! load rejoin ["#{" next s "00}"] ] to-byte: func [s [string!]] [ ; converts a string with a value 0-1 to an inverted byte 255 - to integer! 255 * to decimal! s ] ; ; --- Parse SVG defs ; draw-blk: copy [] append-style: function [ command [string!] blk [block!] ][ x xy pen-color fill-color line-width mode size radius shape closed? matrix transf-command ][ xy: 0x0 size: 0x0 line-width: 1 matrice: make block! [] radius: none transf-command: none foreach [attr val] blk [ switch attr [ "transform" [print "tranform have been found" ;probe val halt val: parse val "()," transf-command: first val probe transf-command switch transf-command [ "matrix" [ foreach word val [ if not find word "matrix" [ insert tail matrice to-decimal word ] ] ] ] ] "style" [ foreach [attr val] parse val ":;" [ switch/default attr [ "font-size" [ ] "stroke" [ switch/default first val [ #"#" [pen-color: to-color val] #"n" [pen-color: none] ][ print ["Unknown stroke:" val] ] ] "stroke-width" [line-width: to decimal! val] "fill" [ fill-color: switch/default first val [ #"#" [to-color val] #"n" [none] ][ print ["Unknown fill value:" val] none ] ] "fill-rule" [ mode: switch/default val [ "evenodd" ['even-odd] ][ print ["Unknown fill-rule value:" val] none ] ] "stroke-opacity" [pen-color: any [pen-color 0.0.0.0] pen-color/4: to-byte val] "fill-opacity" [fill-color: any [fill-color 0.0.0.0] fill-color/4: to-byte val] "stroke-linejoin" [ insert tail draw-blk switch/default val [ "miter" [compose [line-join miter]] "round" [compose [line-join round]] "bevel" [compose [line-join bevel]] ][ print ["Unknown stroke-linejoin value:" val] none ] ] "stroke-linecap" [ insert tail draw-blk 'line-cap insert tail draw-blk to word! val ] ][ print ["Unknown style:" attr] ] ] ] "x" [xy/x: scale-x * val] "y" [xy/y: scale-y * val] "width" [size/x: scale-x * val] "height" [size/y: scale-y * val] "rx" [print "rx"] "ry" [radius: to decimal! val] "d" [ shape: copy [] x: none closed?: false foreach token load val [ switch/default token [ M [insert tail shape 'move] C [insert tail shape 'curve] L [insert tail shape 'line] z [closed?: true] ][ unless number? token [print ["Unknown path command:" token]] either x [insert tail shape as-pair x scale-y * token x: none] [x: scale-x * token] ] ] ] ] ] insert tail draw-blk compose [ pen (pen-color) fill-pen (fill-color) fill-rule (mode) line-width (line-width * min scale-x scale-y) ] switch command [ "rect" [ insert tail draw-blk compose [box (xy) (xy + size)] if radius [insert tail draw-blk radius] ] "path" [ unless closed? [print "Path closed"] either transf-command <> none [ switch transf-command [ "matrix" [insert tail draw-blk compose/only [ (to-word transf-command) (matrice) shape (shape) reset-matrix]] ] ][ insert tail draw-blk compose/only [shape (shape)] ] ] "g" [ print "Write here how to handle G insertion to Draw block" insert tail draw-blk probe compose/only [reset-matrix (to-word transf-command) (matrice)] ] ] ] probe defs foreach blk defs [ switch first blk [ "rect" [append-style first blk second blk] "path" [append-style first blk second blk] "g" [ print "key word" probe first blk print "matrix and style in G" probe second blk append-style first blk second blk ;print "what to draw in G" probe third blk foreach blk2 third blk [ probe blk2 switch first blk2[ "path" [append-style first blk2 second blk2] ] ] ] ] ] probe draw-blk draw-blk ] view make face [ offset: 100x100 size: 200x200 action: request-file/filter/only "*.svg" text: rejoin ["SVG Demo [" last split-path action "]"] data: read action color: white effect: compose/only [draw (load-svg data size)] edge: font: para: none feel: make feel [ detect: func [face event] [ if event/type = 'resize [ insert clear face/effect/draw load-svg face/data face/size show face ] if event/type = 'close [quit] ] ] options: [resize] ] | |
shadwolf: 23-Jun-2005 | REBOL [ Title: "SVG Demo" Owner: "Ashley G. Trüter" Version: 0.0.1 Date: 21-Jun-2005 Purpose: "Loads and displays a resizeable SVG file." History: { 0.0.1 Initial release } Notes: { Tested on very simple SVG icons Only a few basic styles / attributes / commands supported Does not handle sizes in units other than pixels (e.g. pt, in, cm, mm, etc) SVG path has an optional close command, "z" ... AGG shape equivalent auto-closes load-svg function needs to be totally refactored / optimized ... *sample only* } ] ; The following commands are available for path data: ; ; M = moveto ; L = lineto ; H = horizontal lineto ; V = vertical lineto ; C = curveto ; S = smooth curveto ; Q = quadratic Belzier curve ; T = smooth quadratic Belzier curveto ; A = elliptical Arc ; Z = closepath ;print: none ; comment out this line to enable debug messages load-svg: function [svg-file [file! string!] size [pair!]] [ id defs x y to-color to-byte draw-blk append-style svg-size scale-x scale-y ][ xml: either string? svg-file [parse-xml svg-file] [ unless %.svg = suffix? svg-file [to error! "File has an invalid suffix!"] parse-xml read svg-file ] unless xml/3/1/1 = "svg" [to error! "Could not find SVG header!"] ;unless find ["id" "xmlns"] xml/3/1/2/1 [to error! "Could not find ID header!"] ;unless xml/3/1/3/1/1 = "defs" [to error! "Could not find DEFS header!"] id: xml/3/1/2 defs: xml/3/1/3 ; ; --- Parse SVG id ; svg-size: either find ["32pt" "48pt" "72pt"] select id "width" [ switch select id "width" [ "72pt" [120x120] "48pt" [80x80] "32pt" [60x60] ] ][ as-pair to integer! any [select id "width" "100"] to integer! any [select id "height" "100"] ] x: to integer! any [select id "x" "0"] y: to integer! any [select id "y" "0"] scale-x: size/x / svg-size/x scale-y: size/y / svg-size/y ; ; --- Helper functions ; to-color: func [s [string!]] [ ; converts a string in the form "#FFFFFF" to a 4-byte tuple to tuple! load rejoin ["#{" next s "00}"] ] to-byte: func [s [string!]] [ ; converts a string with a value 0-1 to an inverted byte 255 - to integer! 255 * to decimal! s ] ; ; --- Parse SVG defs ; draw-blk: copy [] append-style: function [ command [string!] blk [block!] ][ x xy pen-color fill-color line-width mode size radius shape closed? matrix transf-command ][ xy: 0x0 size: 0x0 line-width: 1 matrice: make block! [] radius: none transf-command: none foreach [attr val] blk [ switch attr [ "transform" [print "tranform have been found" ;probe val halt val: parse val "()," transf-command: first val probe transf-command switch transf-command [ "matrix" [ foreach word val [ if not find word "matrix" [ insert tail matrice to-decimal word ] ] ] ] ] "style" [ foreach [attr val] parse val ":;" [ switch/default attr [ "font-size" [ ] "stroke" [ switch/default first val [ #"#" [pen-color: to-color val] #"n" [pen-color: none] ][ print ["Unknown stroke:" val] ] ] "stroke-width" [line-width: to decimal! val] "fill" [ fill-color: switch/default first val [ #"#" [to-color val] #"n" [none] ][ print ["Unknown fill value:" val] none ] ] "fill-rule" [ mode: switch/default val [ "evenodd" ['even-odd] ][ print ["Unknown fill-rule value:" val] none ] ] "stroke-opacity" [pen-color: any [pen-color 0.0.0.0] pen-color/4: to-byte val] "fill-opacity" [fill-color: any [fill-color 0.0.0.0] fill-color/4: to-byte val] "stroke-linejoin" [ insert tail draw-blk switch/default val [ "miter" [compose [line-join miter]] "round" [compose [line-join round]] "bevel" [compose [line-join bevel]] ][ print ["Unknown stroke-linejoin value:" val] none ] ] "stroke-linecap" [ insert tail draw-blk 'line-cap insert tail draw-blk to word! val ] ][ print ["Unknown style:" attr] ] ] ] "x" [xy/x: scale-x * val] "y" [xy/y: scale-y * val] "width" [size/x: scale-x * val] "height" [size/y: scale-y * val] "rx" [print "rx"] "ry" [radius: to decimal! val] "d" [ shape: copy [] x: none closed?: false foreach token load val [ switch/default token [ M [insert tail shape 'move] C [insert tail shape 'curve] S [insert tail shape 'curv] L [insert tail shape 'line] Q [insert tail shape 'qcurve] T [insert tail shape 'qcurv] z [closed?: true] H [insert tail shape 'hline] V [insert tail shape 'vline] A [insert tail shape 'arc] ][ unless number? token [print ["Unknown path command:" token]] either x [insert tail shape as-pair x scale-y * token x: none] [x: scale-x * token] ] ] ] ] ] insert tail draw-blk compose [ pen (pen-color) fill-pen (fill-color) fill-rule (mode) line-width (line-width * min scale-x scale-y) ] switch command [ "rect" [ insert tail draw-blk compose [box (xy) (xy + size)] if radius [insert tail draw-blk radius] ] "path" [ unless closed? [print "Path closed"] either transf-command <> none [ switch transf-command [ "matrix" [insert tail draw-blk compose/only [ (to-word transf-command) (matrice) shape (shape) reset-matrix]] ] ][ insert tail draw-blk compose/only [shape (shape)] ] ] "g" [ print "Write here how to handle G insertion to Draw block" insert tail draw-blk probe compose/only [reset-matrix (to-word transf-command) (matrice)] ] ] ] probe defs foreach blk defs [ switch first blk [ "rect" [append-style first blk second blk] "path" [append-style first blk second blk] "g" [ print "key word" probe first blk print "matrix and style in G" probe second blk append-style first blk second blk ;print "what to draw in G" probe third blk foreach blk2 third blk [ probe blk2 switch first blk2[ "path" [append-style first blk2 second blk2] ] ] ] ] ] probe draw-blk draw-blk ] view make face [ offset: 100x100 size: 200x200 action: request-file/filter/only "*.svg" text: rejoin ["SVG Demo [" last split-path action "]"] data: read action color: white effect: compose/only [draw (load-svg data size)] edge: font: para: none feel: make feel [ detect: func [face event] [ if event/type = 'resize [ insert clear face/effect/draw load-svg face/data face/size show face ] if event/type = 'close [quit] ] ] options: [resize] ] | |
shadwolf: 23-Jun-2005 | REBOL [ Title: "SVG Demo" Owner: "Ashley G. Trüter" Version: 0.0.1 Date: 21-Jun-2005 Purpose: "Loads and displays a resizeable SVG file." History: { 0.0.1 Initial release } Notes: { Tested on very simple SVG icons Only a few basic styles / attributes / commands supported Does not handle sizes in units other than pixels (e.g. pt, in, cm, mm, etc) SVG path has an optional close command, "z" ... AGG shape equivalent auto-closes load-svg function needs to be totally refactored / optimized ... *sample only* } ] ; The following commands are available for path data: ; ; M = moveto ; L = lineto ; H = horizontal lineto ; V = vertical lineto ; C = curveto ; S = smooth curveto ; Q = quadratic Belzier curve ; T = smooth quadratic Belzier curveto ; A = elliptical Arc ; Z = closepath ;print: none ; comment out this line to enable debug messages load-svg: function [svg-file [file! string!] size [pair!]] [ id defs x y to-color to-byte draw-blk append-style svg-size scale-x scale-y ][ xml: either string? svg-file [parse-xml svg-file] [ unless %.svg = suffix? svg-file [to error! "File has an invalid suffix!"] parse-xml read svg-file ] unless xml/3/1/1 = "svg" [to error! "Could not find SVG header!"] ;unless find ["id" "xmlns"] xml/3/1/2/1 [to error! "Could not find ID header!"] ;unless xml/3/1/3/1/1 = "defs" [to error! "Could not find DEFS header!"] id: xml/3/1/2 defs: xml/3/1/3 ; ; --- Parse SVG id ; svg-size: either find ["32pt" "48pt" "72pt"] select id "width" [ switch select id "width" [ "72pt" [120x120] "48pt" [80x80] "32pt" [60x60] ] ][ as-pair to integer! any [select id "width" "100"] to integer! any [select id "height" "100"] ] x: to integer! any [select id "x" "0"] y: to integer! any [select id "y" "0"] scale-x: size/x / svg-size/x scale-y: size/y / svg-size/y ; ; --- Helper functions ; to-color: func [s [string!]] [ ; converts a string in the form "#FFFFFF" to a 4-byte tuple to tuple! load rejoin ["#{" next s "00}"] ] to-byte: func [s [string!]] [ ; converts a string with a value 0-1 to an inverted byte 255 - to integer! 255 * to decimal! s ] ; ; --- Parse SVG defs ; draw-blk: copy [] append-style: function [ command [string!] blk [block!] ][ x xy pen-color fill-color line-width mode size radius shape closed? matrix transf-command ][ xy: 0x0 size: 0x0 line-width: 1 matrice: make block! [] radius: none transf-command: none foreach [attr val] blk [ switch attr [ "transform" [print "tranform have been found" ;probe val halt val: parse val "()," transf-command: first val probe transf-command switch transf-command [ "matrix" [ foreach word val [ if not find word "matrix" [ insert tail matrice to-decimal word ] ] ] ] ] "style" [ foreach [attr val] parse val ":;" [ switch/default attr [ "font-size" [ ] "stroke" [ switch/default first val [ #"#" [pen-color: to-color val] #"n" [pen-color: none] ][ print ["Unknown stroke:" val] ] ] "stroke-width" [line-width: to decimal! val] "fill" [ fill-color: switch/default first val [ #"#" [to-color val] #"n" [none] ][ print ["Unknown fill value:" val] none ] ] "fill-rule" [ mode: switch/default val [ "evenodd" ['even-odd] ][ print ["Unknown fill-rule value:" val] none ] ] "stroke-opacity" [pen-color: any [pen-color 0.0.0.0] pen-color/4: to-byte val] "fill-opacity" [fill-color: any [fill-color 0.0.0.0] fill-color/4: to-byte val] "stroke-linejoin" [ insert tail draw-blk switch/default val [ "miter" [compose [line-join miter]] "round" [compose [line-join round]] "bevel" [compose [line-join bevel]] ][ print ["Unknown stroke-linejoin value:" val] none ] ] "stroke-linecap" [ insert tail draw-blk 'line-cap insert tail draw-blk to word! val ] ][ print ["Unknown style:" attr] ] ] ] "x" [xy/x: scale-x * val] "y" [xy/y: scale-y * val] "width" [size/x: scale-x * val] "height" [size/y: scale-y * val] "rx" [print "rx"] "ry" [radius: to decimal! val] "d" [ shape: copy [] x: none closed?: false if all [x not number? token] [ insert tail shape x * either token = 'V [scale-y][scale-x] x: none ] foreach token load val [ switch/default token [ M [insert tail shape 'move] C [insert tail shape 'curve] S [insert tail shape 'curv] L [insert tail shape 'line] Q [insert tail shape 'qcurve] T [insert tail shape 'qcurv] z [closed?: true] H [insert tail shape 'hline] V [insert tail shape 'vline] A [insert tail shape 'arc] ][ unless number? token [print ["Unknown path command:" token]] either x [insert tail shape as-pair x scale-y * token x: none] [x: scale-x * token] ] ] ] ] ] insert tail draw-blk compose [ pen (pen-color) fill-pen (fill-color) fill-rule (mode) line-width (line-width * min scale-x scale-y) ] switch command [ "rect" [ insert tail draw-blk compose [box (xy) (xy + size)] if radius [insert tail draw-blk radius] ] "path" [ unless closed? [print "Path closed"] either transf-command <> none [ switch transf-command [ "matrix" [insert tail draw-blk compose/only [ (to-word transf-command) (matrice) shape (shape) reset-matrix]] ] ][ insert tail draw-blk compose/only [shape (shape)] ] ] "g" [ print "Write here how to handle G insertion to Draw block" insert tail draw-blk probe compose/only [reset-matrix (to-word transf-command) (matrice)] ] ] ] probe defs foreach blk defs [ switch first blk [ "rect" [append-style first blk second blk] "path" [append-style first blk second blk] "g" [ print "key word" probe first blk print "matrix and style in G" probe second blk append-style first blk second blk ;print "what to draw in G" probe third blk foreach blk2 third blk [ probe blk2 switch first blk2[ "path" [append-style first blk2 second blk2] ] ] ] ] ] probe draw-blk draw-blk ] view make face [ offset: 100x100 size: 200x200 action: request-file/filter/only "*.svg" text: rejoin ["SVG Demo [" last split-path action "]"] data: read action color: white effect: compose/only [draw (load-svg data size)] edge: font: para: none feel: make feel [ detect: func [face event] [ if event/type = 'resize [ insert clear face/effect/draw load-svg face/data face/size show face ] if event/type = 'close [quit] ] ] options: [resize] ] | |
Steeve: 13-Oct-2009 | My, my, my... I think some features in SVG, are too much work to implement with Rebol. 1/ The "objectBoundingBox" units. Which means, coordinates and lengths are ratio or percentages. And they are converted to real units depending of the bounding box of the shape on which they apply. It's easy to calculate when the shapes are boxes or vectors. But when it comes with arcs or curves, it becomes a pain in the ass. It's not a real problem because Inkscape for example has an option (simplify shapes) to convert all the ratio units in real units (ie. pixel units). So, I don't see the interest to rewrite DRAW from scratch with Rebol. (because it's what it means, to be able to calculate all the bounding box) 2/ Outlines with gradients Those fullishs can specify a gradient for the pen attribute (which draw the outlines). Rebol can only have a gradient to fill a shape. It can be simulated by drawing the related shape 2 times. 1 time with the pen gradient. A second time with the fill-pen attribute (which can be a gradient too). But the second time the shape must be, at first, downsized of the line width. To do so, it means that we need to know the center of the Bounding box of the shape. So, same problem than 1/ 3/ The fill-pen attribute (gradient or color) never apply on the outline of the shape, event if the outline has no color but actually has a width. It allows SVG for example, to have transparent outlines. We can't do that with Rebol. Because the fill-pen attributes (or the gradient) fills all the shape at first. And then the outline is drawed over. If we don't provide a pen color, or we provide a transparent color, we see the fill-pen content instead, at the place of the outline. Perhaps, that can be modified in Draw. A nice request but not a so considerable feature to my mind. (And it can be impossible to implement this in Draw, if AGG doesn't support it at first). | |
Group: !REBOL3-OLD1 ... [web-public] | ||
Geomol: 13-Mar-2009 | sx: sy: 1 lw: 10 clip-tl: 20x20 clip-br: 380x380 sz: 400x400 color0: orange color1: 0.0.228 color2: gold icon: make image! sz image: [ transform 0 sx sy 0x0 0x0 pen none fill-pen color0 box 0x0 400x400 50 fill-pen color1 box 20x20 380x380 30 clip clip-tl clip-br pen black fill-pen color2 line-width lw arc 65x335 305x305 180.0 360.0 fill-pen color1 arc 65x335 148x148 180.0 360.0 fill-pen color2 arc 65x335 56x56 180.0 340.0 clip 0x0 sz pen black fill-pen white line-width lw line-join round push [ scale 0.9 0.9 translate 20x20 shape [ move 221x60 line 85x60 85x349 187x349 187x255 230x349 340x349 264x238 curve 264x238 323x218 323x152 curve 323x152 323x60 221x60 move 204x187 line 187x187 187x137 204x137 curve 204x137 225x137 225x162 curve 225x162 225x187 204x187 ] ] fill-pen none pen color0 box 10x10 389x389 44 pen black box 15x15 384x384 40 pen none line-width 0 fill-pen linear 0x0 0.0 110.0 90.0 1.0 1.0 255.255.255.40 255.255.255.120 255.255.255.200 shape [move 400x80 arc 0x80 400.0 300.0 line 0x0 400x0 400x80] fill-pen linear 0x290 30.0 110.0 90.0 1.0 1.0 255.255.255.255 255.255.255.192 255.255.255.128 shape [move 0x300 arc 400x300 600.0 200.0 line 400x400 0x400 0x300] ] view center-face layout [ origin 0 across b: box 400x400 black effect [draw image][ file: request-file/only/save/file %rebol-icon.png if not file [exit] if not find file ".png" [append file ".png"] img: make image! b/size img2: make image! b/size img2/alpha: 255 draw img2 [pen none fill-pen black box 0x0 400x400 50] draw img image img/alpha: img2/alpha save/png file img ] return btn "Color 0" [color0: request-color/color color0 show b] btn "Color 1" [color1: request-color/color color1 show b] btn "Color 2" [color2: request-color/color color2 show b] ] | |
Steeve: 28-May-2009 | See this line of code i do to rebuild a draw block in area-tc (it's called thousand times when the style is scrolled) out-style: insert insert insert insert insert insert insert insert out-style 'pen color/2 'fill-pen color/2 'box as-pair abs-x 7 as-pair (f/x * length? str) + abs-x 7 + f/y 3 Insane ;-) | |
Group: Postscript ... Emitting Postscript from REBOL [web-public] | ||
Anton: 18-Apr-2006 | font1: make object! [ name: "Nimbus Roman No9 L" style: none size: 33 color: 255.0.0 offset: 2x2 space: 0x0 align: 'center valign: 'center shadow: none ] font2: make object! [ name: "Nimbus Roman No9 L" style: none size: 13 color: 0.0.0 offset: 2x2 space: 0x0 align: 'center valign: 'center shadow: none ] view layout [box 500x700 white effect [draw [ box 0x0 493x698 fill-pen none box 0x0 493x698 line-width 0 font font1 pen 255.0.0 text vectorial "REBOL PostScript Dialect" 59x68 pen 0.0.0 line 59x104 431x104 font font2 pen 0.0.0 text vectorial {With this dialect it's possible to easily produce PostScript output.} 79x121 ]]] | |
Group: !REBOL2 Releases ... Discuss 2.x releases [web-public] | ||
Geomol: 28-Nov-2006 | I've posted this bug in the comments to 2.7.4 OSX build, but I'll repeat it here, in case it's being seen here first. It's a colour problem, when transforming in the DRAW dialect. Code example: i: make image! [100x100 255.0.0] draw i [pen green line 10x10 90x90] view layout [box effect [draw [image i transform 0 -30x-20 2 2 0x0 image i]]] | |
Geomol: 30-Nov-2006 | Does line-join in the DRAW dialect works with Windows version? There seem to be a problem with OSX version: view layout [box 200x100 effect [draw [pen red line-width 15 line-join round line 10x10 90x10 90x90 10x10 polygon 110x10 190x10 190x90]]] I think, they both should be with rounded corners. | |
Geomol: 30-Nov-2006 | What about line-cap? view layout [box effect [draw [pen red line-width 15 line-cap round line 10x10 90x10 90x90]]] | |
Cyphre: 30-Nov-2006 | view layout [ origin 0 box 400x100 white effect [ draw [ pen red line-width 15 line-join round line 10x10 90x10 90x90 10x10 spline 110x10 190x10 190x90 110x10 spline 210x10 290x10 290x90 210x10 closed polygon 310x10 390x10 390x90 ] ] ] | |
Cyphre: 30-Nov-2006 | example: view layout [ origin 0 box 200x100 white effect [ draw [ pen red line-width 15 line-cap round line 10x10 90x10 90x90 10x10 line-cap butt line 110x10 190x10 190x90 110x10 ] ] ] | |
Cyphre: 30-Nov-2006 | hmm, what's wrong with this? i: make image! [100x100 255.0.0] draw i [pen green line 10x10 90x90] view layout [box effect [draw [image i transform 0 -30x-20 2 2 0x0 image i]]] | |
Group: gfx math ... Graphics or geometry related math discussion [web-public] | ||
Maxim: 25-Feb-2010 | cyphre... use this as a basis: view layout [box 200x200 effect [ draw [ push [ translate 119x119 pen none fill-pen black box -50x-30 50x50 fill-pen blue pen red line-width 3 circle 50x50 25 fill-pen red pen blue circle -50x50 25 fill-pen blue pen red circle -50x-30 25 fill-pen red pen blue circle 50x-30 25 ] ] ]] adding new black, red, blue, black, circles in betwen colors may give very poor results. sometimes 1 pixel width lines practically disapear horizontally! playing around with the line width will also have a different visual impact, since the aliasing will spread the error more or less. as I said, i know part of the issue is related to the screen's rgb sub-pixel channel components but I remember trying some of this in other softwares and the effects weren't as image degrading. to me the main defect is that you will notice a WHITE ringing effect between the red and blue on one side and a black ring on the other. I can understand the black ring, but can't explain the white one, which is why I think it coule be related to gamma issues. also, the black ring seems to be wider than it should & the effect seems the most apparent at ODD line widths, which is a bit strange too... I'm wondering if AGG has an algorithm which is trying to compensate for pixel to pixel color defects and gets it wrong. maybe it could be enhanced to support subpixel aliasing (or gets it wrong if it already does so). | |
Maxim: 15-Jan-2011 | an example usage circle: draw 100x100 [pen black fill-pen red circle 50x50 30] circle/alpha: 0 alpha: draw 100x100 [pen white fill-pen white circle 50x50 30] alpha/alpha: 0 line: draw 100x100 [ pen blue fill-pen blue line-width 5 line 10x50 90x50 ] f: make face [ offset: 100x100 color: gray pane: make face [ color: none image: line text: "close for next" font: make font [color: white ] ] ] view f f/pane/text: none result: channel-copy/into line 'blue 'green circle result: channel-copy/into alpha 'blue 'alpha result f/pane/image: result view f | |
Group: !CureCode ... web-based bugtracking tool [web-public] | ||
Steeve: 22-Sep-2009 | pie-chart: func [ con [block!] ;-- block of overriden constants cmd [block!] ;-- commands to draw the pie-chart /local push angle middle bottom pane bout sens size back-color start line text ][ ;-- default constants (overridable by con block) size: 300x200 ;--size of the box back-color: white ;-- back color of the drawing start: -90 ;-- starting angle of the pie chart (in degrees) line: [pen gray line] ;-- draw block used for lines text: [pen none fill-pen gray text vectorial] ;-- draw block used for texts ;-- do bind con 'size pane: make block! 30 push: func [data][append pane compose data] center: size / 2 ; -- center of the pie chart radius: to-pair divide min size/x size/y 2.5 sens: true bottom: 0 foreach [title color percent] cmd [ if issue? color [color: to-tuple debase/base color 16] push [pen back-color fill-pen (color) arc center radius (start) (angle: round/ceiling percent * 360) closed] middle: angle / 2 + start push line push [ (center + as-pair radius/x * cosine middle radius/x * sine middle) (bout: center + as-pair radius/x + 3 * cosine middle radius/x + 3 * sine middle) ] either 0 <= cosine middle [ unless sens [bottom: 0 send: true] push reduce [ bout: as-pair center/x + radius/x bout/y bout: as-pair bout/x + 8 max bout/y bottom bout: as-pair bout/x + 3 bout/y ] bottom: bout/y + 12 ][ if sens [bottom: size/y sens: false] push reduce [ bout: as-pair center/x - radius/x bout/y bout: as-pair bout/x - 8 min bout/y bottom bout: as-pair bout/x - 3 bout/y ] bottom: bout/y - 12 bout: as-pair bout/x - first size-text make face [ size: 5000x5000 text: title ] bout/y ] push text push [(bout + 1x-8 ) (title)] start: start + angle ] pane ] | |
Steeve: 22-Sep-2009 | pie-chart: func [ con [block!] ;-- block of overriden constants cmd [block!] ;-- commands to draw the pie-chart /local push angle middle bottom pane bout sens size back-color start line text font* font ][ ;-- default constants (overridable by con block) size: 300x200 ;--size of the box back-color: white ;-- back color of the pie font: make face/font [color: gray size: 12] start: -90 ;-- starting angle of the pie chart (in degrees) line: [pen gray line] ;-- draw block used for lines ;-- do bind con 'size font/offset: 0x0 pane: make block! 30 push: func [data][append pane compose data] center: size / 2 ; -- center of the pie chart radius: to-pair divide min size/x size/y 2.5 sens: true bottom: 0 font*: font foreach [title color percent] cmd [ if issue? color [color: to-tuple debase/base color 16] push [pen back-color fill-pen (color) arc center radius (start) (angle: round/ceiling percent * 360) closed] middle: angle / 2 + start push line push [ (center + as-pair radius/x * cosine middle radius/x * sine middle) (bout: center + as-pair radius/x + 3 * cosine middle radius/x + 3 * sine middle) ] text: to-image make blank-face [ size: size-text make face [size: 5000x5000 text: title font: font*] text: title font: font* color: none ] either 0 <= cosine middle [ unless sens [bottom: 0 sens: true] push reduce [ bout: as-pair center/x + radius/x bout/y bout: as-pair bout/x + 8 max bout/y bottom bout: as-pair bout/x + 3 bout/y ] bottom: bout/y + text/size/y ][ if sens [bottom: size/y sens: false] push reduce [ bout: as-pair center/x - radius/x bout/y bout: as-pair bout/x - 8 min bout/y bottom bout: as-pair bout/x - 3 bout/y ] bottom: bout/y - text/size/y bout: as-pair bout/x - text/size/x bout/y ] push [image (text) (bout + as-pair 1 text/size/y / -2 - 0.5 ) black ] start: start + angle ] pane ] | |
Group: Printing ... [web-public] | ||
Dockimbel: 4-Sep-2008 | Quite well so far. I currently only supports the following Draw commands : text, line, box, font, pen | |
Group: !REBOL3 Extensions ... REBOL 3 Extensions discussions [web-public] | ||
Maxim: 16-Jul-2010 | as an example, we could just represent a draw structure using primitives as objects (which can include several AGG primitives) and call AGG native code directly from the object tree. something like draw context [ prim: 'cross-box offset: 10x10 size: 20x20 thickness: 1 border: black cross-color: red ] would draw a box and two cross lines, without the need to reduce this at every refresh when its refreshed and data comes from external manipulators: draw compose [ pen (prim/border) fill-pen none line-width (prim/thickness) line-pattern none box (prim/offset) (prim/offset + prim/size - 1x1) pen (prim/cross-color) line (prim/offset) (prim/offset + prim/size - 1x1) line (prim/offset + (prim/size * 1x0)) (prim/offset + (prim/size * 0x1)) ] | |
Group: !REBOL3 GUI ... [web-public] | ||
Ashley: 8-Jan-2010 | He's right. While: g: make gob! [draw: [pen red line 10x10 20x20]] g/draw/pen: blue view g is fine for small draw blocks, it's a pain for example setting the 2nd pen to a different color ... or moving a logical group of draw operations around. In reality you are quite often forced to dynamically regenerate draw blocks each time ... which forces you to split big draw blocks up into discrete gobs (e.g. one gob to draw a blue circle, another a red box, etc). This is an issue with draw not gobs (which have been very well designed IMHO). | |
Ashley: 25-Jan-2010 | ctx-rebgui3: make object! [ cursors: make object! [ app-start: 32650 hand: 32649 help: 32651 hourglass: 32650 arrow: 32512 cross: 32515 i-shape: 32513 no: 32648 size-all: 32646 size-nesw: 32643 size-ns: 32645 size-nwse: 32642 size-we: 32644 up-arrow: 32516 wait: 32514 ] colors: make object! [ page: white edit: white text: black true: leaf false: red link: blue theme: [165.217.246 0.105.207 0.55.155] outline: [207.207.207 160.160.160 112.112.112] ] metrics: make object! [ cell: 4 gap: cell * 2 line: cell * 5 margin: cell * 4 margin-size: as-pair margin margin radius: 2 ] ; Private functions set 'make-gob make function! [[ spec [block!] ; offset, size and one or more attribute/value pairs /data object /local size text gob axis ][ size: spec/2 if any [negative? size/x negative? size/y] [ text: select spec 'text all [block? text text: first find text string!] size: 8x4 + size-text make gob! compose [size: 9999x9999 text: (text)] all [negative? spec/2/x spec/2/x: size/x] all [negative? spec/2/y spec/2/y: size/y] ] gob: copy [] ; attributes are (text, color, effect, image and draw) foreach [attribute value] spec [ switch attribute [ box [ attribute: 'draw value: compose [ pen (get value/1) line-width 1 fill-pen (get value/2) box 0x0 (spec/2 - 1x1) (metrics/radius) ] ] pill [ attribute: 'draw axis: either spec/2/x >= spec/2/y [2] [1] value: compose/deep [ pen (colors/outline/3) line-width 1 grad-pen linear (spec/2/:axis * .1) (spec/2/:axis * .9) (all [axis = 2 90]) [(colors/outline/1) (white) (colors/outline/1)] box 0x0 (spec/2 - 1x1) (metrics/radius) ] ] ] append gob reduce [attribute value] ] spec: gob gob: make gob! compose [offset: spec/1 size: spec/2 (to set-word! spec/3) spec/4 data: (make object! any [object copy []])] foreach [attribute value] skip spec 2 [ append gob make gob! compose [offset: 0x0 size: spec/2 (to set-word! attribute) value] ] gob ]] ; Public functions set 'display make function! [[ title spec /local gob xy max-x max-y left-to-right? after-count after-limit here arg append-widget widget last-widget word action handler size text color ][ xy: metrics/margin-size max-x: xy/x max-y: xy/y left-to-right?: true after-count: 1 after-limit: 9999 gob: make gob! compose [text: (title) data: (make object! [])] append-widget: make function! [[][ unless widget [exit] unless handler [ handler: compose/deep [on-down: make function! [[event][(action)]]] ] append gob switch widget [ bar [ make-gob compose [(xy) (as-pair max-x - metrics/margin 1) color (colors/outline/3)] ] button [ all [none? size size: 15x5] make-gob/data compose/deep [(xy) (size * metrics/cell) pill none text [center (text)]] handler ] text [ all [none? size size: 15x5] make-gob/data compose/only [(xy) (size * metrics/cell) color (white) text (text)] handler ] ] last-widget: last gob/pane ; 1st reverse item? unless left-to-right? [ last-widget/offset/x: last-widget/offset/x - last-widget/size/x ] xy: last-widget/offset ; max vertical size max-y: max max-y xy/y + last-widget/size/y ; horizontal pos adjustments all [ left-to-right? xy/x: xy/x + last-widget/size/x max-x: max max-x xy/x ] ; after limit reached? either after-count < after-limit [ ; spacing xy/x: xy/x + either left-to-right? [metrics/gap] [negate metrics/gap] ++ after-count ] [ xy: as-pair metrics/margin max-y + metrics/gap after-count: 1 ] all [:word set :word last-widget] word: widget: action: handler: size: text: color: none ]] parse reduce/only spec [after bar button handler return reverse rich text] [ any [ opt [here: set arg paren! (here/1: do arg) :here] [ 'return ( append-widget xy: as-pair metrics/margin max-y + metrics/gap left-to-right?: true after-limit: 9999 ) | 'reverse ( append-widget xy: as-pair max-x max-y + metrics/gap left-to-right?: false after-limit: 9999 ) | 'after set arg integer! ( ; return unless this is first widget if widget [ append-widget xy: as-pair metrics/margin max-y + metrics/gap ] after-count: 1 after-limit: arg ) | 'handler set arg block! (handler: arg) | 'rich set arg block! (text: arg) | [set arg integer! | set arg pair!] (size: arg) | set arg string! (text: arg) | [set arg tuple! | set arg none!] (color: arg) | set arg block! (action: arg) | set arg set-word! (append-widget word: :arg) | set arg word! (append-widget widget: arg) ] ] ] append-widget gob/size: metrics/margin-size + as-pair max-x max-y gob/offset: system/view/metrics/work-size - gob/size / 2 append system/view/screen-gob gob show system/view/screen-gob ]] set 'undisplay make function! [[gob][ remove find system/view/screen-gob gob show system/view/screen-gob ]] ; Start global GUI event handler active-gob: none system/view/event-port: open [scheme: 'event] system/view/event-port/awake: make function! [[event /local evt gob][ evt: map-event event gob: evt/gob while [not object? gob/data] [gob: gob/parent] if all [event/type = 'move gob <> active-gob] [ attempt [active-gob/data/on-away event] active-gob: gob attempt [active-gob/data/on-over event] ] evt: to word! ajoin ['on- event/type] attempt [gob/data/:evt event] ]] ] | |
Steeve: 12-Mar-2010 | recycle/ballast 50000 screen: system/view/screen-gob system/view/event-port: open event:// font1: make system/standard/font [size: 20] fire: [ line-width 0.5 pen black fill-pen white line-pattern white text vectorial 0x70 [font font1 bold "F I R E !!!"] ] insert strokes: skip find fire 'line-pattern 2 rand: [0 0 1 1 2 3 3 4 4 5] img: make image! xy: 100x100 show append screen gob: make gob! [offset: xy size: xy image: img] forever [ change img copy/part skip img 0x1 100x76 change strokes random rand draw img fire effect img [blur difference 2.5.10] wait 0.03 show gob ] | |
Steeve: 13-Mar-2010 | recycle/ballast 50000 screen: system/view/screen-gob system/view/event-port: open event:// font1: make system/standard/font [size: 20] insert strokes: skip fire: [ image img (first random [1x-2 0x-2 1x-2 0x-2 -1x-2]) line-width 0.5 pen red fill-pen white line-pattern black text vectorial 0x40 [font font1 bold "F I R E !!!"] ] 'line-pattern 2 rand: [0 1 1 1 2 5 ] img: make image! xy: 100x70 show append screen gob: make gob! [offset: xy size: xy image: img] forever [ change strokes random rand draw img fire effect img [difference 3.5.8 blur img] wait 0.05 show gob ] | |
Steeve: 13-Mar-2010 | see the idea: gob: make gob! [ draw: [ line-width 3 pen red text [...] ... ] ] stroke-color: none capture gob [pen stroke-color] print [gob/draw stroke-color] [ line-width 3 pen stroke-color text [...] ... ] 255.0.0 | |
ssolie: 20-Nov-2010 | Just tried to run the style-browser.r3 on Amiga and hit the following problem >> do %r3-gui.r3 Script: "Untitled" Version: none Date: none >> do %style-browser.r3 Script: "R3 GUI Style Browser" Version: $Id: style-browser.r3 1179 2010-11-19 18:11:46Z Rebolek $ Date: none ** Script error: cannot MAKE/TO image! from: make gob! [offset: 0x0 size: 400x300 alpha: 0 draw: [clip 0x0 400x300 anti-alias false pen false fill-pen 192.192.192 box 1x1 399x299 0 fill-pen false pen 64.64.64 line-cap square line-width 1.0 variable line [0x0.5 399x0.5] line-cap square line-width 1.0 variable line [0.5x0 0.5x299] line-cap square line-width 1.0 variable line [0x299.5 399x299.5] line-cap square line-width 1.0 variable line [399.5x0 399.5x299] clip 6x6 394x294 translate 6x6 line-width 1.0 variable pen 255.255.255 fill-pen false anti-alias true clip 0x0 0x0 pen false line-width 0.0 variable grad-pen linear normal 1x1 0x2... Any ideas? | |
Pekr: 12-Feb-2011 | Any hints how the material system work? How do I "destylize" panel for e.g.? Let's say I want panel functionality, but without the visuals (if I enclose everything in panel, there's too many borders and gradients around, and I would like to have more relaxed design). Let's say I would like to create derived style, called panel-, panel-less, pure-panel, whatever. I can see following draw code: draw: [ plain: [] gradient: [ clip margin-box/top-left margin-box/bottom-right pen none line-width 0 grad-pen linear 1x1 0 gob-size/y 90 area-fill box (margin-box/top-left + 1) (margin-box/bottom-right - 1) 1 ] ] And following on-make code: on-make: [ make-material face get-facet face 'material set-material face 'up all [ get-facet face 'area-fill set-facet face 'draw-mode 'gradient ] make-panel face 'panel ] What I am supposed to do, to change the disign? |